Progress Bars
When dealing with asynchronous applications, it's useful to indicate to the user the progress on those operations.
HTML5 provides a number of useful tools to provide this user feedback:
progress
elementmeter
element
For displaying the progress on an asynchronous operation,progress
will suit most cases.
Progress bars are native to most modern browsers, and fall back to simple text. The following example demonstrates the usage of the progress element:
progress(max="100", title="Loading... please wait")
p (Fallback text)
Loader Element
The loader element is simply a centre-justified container for housing loading information:
article.loader
span.loading-text Loading
progress.loader-bar
span Please Wait