Progress Bar

The Progress Bar is a control in the form of a horizontal bar that shows the linear progress of a process.

Behaviours & States


Progress Bars consist of a Bar and Progress, that fills the Bar. There is also an optional third component to indicate buffering when needed.


The Bar is representative of the total length of play for a given piece of content. Within the Bar, Progress fills to illustrate the progress made during playback. The state of Progress can be illustrated with a popup button indicating either a percentage (%) of completion or time stamp.


The Bar remains static during the length of play, while Progress advances with the content. Progress can advance in one of two ways; it can either be animated to show continuous progression, or unanimated and increase in chunks.


The third, optional, bar is used to display buffering. It should be used to show what has been queued but not yet processed or viewed. This is most applicable in scenarios similar to video playback.


Text may be added within a Tool Tip to indicate status, e.g. 35%. Does the tool tip hide or is always present Buttons may also be added for functionality, e.g. stop/cancel a download. Aside from buttons, there are no other interactions with Progress Bars.


The Progress Bar has no states.


Bar dictates the width of the overall control and is defaulted to 300 pixels. The width can be changed and specified by the designer/developer. The height is not configurable. Progress starts at 0 and grows until the same width as the Bar; buffering works in the same manner.