Search within TutorialsPark

MDL : Progress Bar


How to use MDL - Material Design Lite create Progress Bars


Material Design Lite (MDL) : Progress Bars

Material Design Lite(MDL) component progress is to create a progress bar, visually denoting the state of progress of a activity

The progress is indicated using a horizontal bar with some ongoing animaiton denoting motion. The value of progress bar can either be approximate or percentage values denoting the task completed.

The Basic objective of using Progress bar component is to provide visual data to the about the ongoing activity, but not yet completed

The design and information provided by progess bar has a significant effect on the overall user experience, the data can also be sourced from an external source.


Material Design Lite(MDL) Progess Bar : Default Progess Bar

A MDL Progess bar can be created using class mdl-progess as a container for holding all related content.

The progress component class mdl-js-progress is used to add MDL behaviour to progress bar.

Example: Material Design Lite (MDL) Progress Bar Default Progress Bar

Give it a TRY! » Note:The Color of the default progress bar is same as the choosen theme


Material Design Lite(MDL) Progress Bar : Indeterminate Values

A MDL progress bar denoting indeterminate value is created using class mdl-progress__indeterminate

Example: Material Design Lite (MDL) Progress Bar Indeterminate Values

Give it a TRY! » Note: The progress bar has an animation effect, but denotes no specific value


Material Design Lite(MDL) Progress Bar : Buffering Effect

A MDL Progress bar with Buffering animation is creating using class method setBuffer(value)

The value of method setBuffer(value) denotes the percentage of data buffered, while dotted lines denote values remaining to be buffered.

Example: Material Design Lite (MDL) Navigation Layout Buffering Effect

Give it a TRY! » Note:The value of the progress bar data can be sourced from an external source as well.


Material Design Lite : Progress Bar Classes

MDL Class Description
mdl-progress To create a container for progress bar.
mdl-js-progress To assign MDL behaviour to progress bar component
mdl-progress-indeterminate To apply animation effect to MDL progress bar.