Vue Material -

Progress Bar

Progress indicators are visual indications of an app loading content.

Progress bars have 4 types for each operation that your application may need: Determinate, Indeterminate, Query or Buffer.

Progress Bar

When indicators are determinate they indicate how long an operation will take when the percentage complete is detectable.


When indicators are indeterminate they request that the user wait while something finishes when it’s not necessary to indicate how long it will take.


When dealing with media content like streaming videos we can use progress bars to show the buffering progress indicator on a video.


When searching or filtering a large amount of data, we can show a query progress bar. This will tell the user that some content is being retrieved.


API - md-progress-bar

The following options can be applied to all progress bars:

md-mode String Set the mode the progress. See below the detailed description of each mode. determinate
md-mode="determinate" String The default mode. Works along with md-value prop. Apply a 0% to 100% loading bar. -
md-mode="indeterminate" String Create a indeterminate loading bar -
md-mode="query" String Create a loading bar for queries. Useful when retrieving a lot of contents. -
md-mode="buffer" String Create a loading bar with a buffer. Commonly used in videos. -
md-value Number The current progress amount. From 0 to 100. null
md-buffer Number The current buffer amount. From 0 to 100. null