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 BarGive 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 ValuesGive 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 EffectGive 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-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.|