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:

  1. progress element
  2. meter 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)

(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
LoadingPlease Wait