Material Design Lite – Loading : MDL Loading Component is used to indicate the loading and progress state. Material design lite progress component is and indicator which is used to indicate some background activity. Here in this tutorial we are going to explain how you can create progress bar in material design lite.
Material Design Lite – Loading | Progress Bar | Spinner | Example
Let us go step by step to create material design lite progress bar loading. There are two types of loading components available in material design lite.
- Progress Bar
- Spinner
Progress Bar
Let us first understand the material design lite progress bar.
Default Progress Bar-
mdl-js-progress class is used to create default progress bar. Here is an example of default progress bar-
Material Design Lite – Default Progress Bar Example:
<br/> <div id="myId" class="mdl-progress mdl-js-progress"></div> |
If you run the above example it will produce output something like this –
Indeterminate Progress Bar-
mdl-progress__indeterminate class is used to create Indeterminate progress bar. Here is an example of Indeterminate progress bar-
Material Design Lite Indeterminate Progress Bar Example:
<br/> <br/> <div id="myId2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div> |
If you run the above example it will produce output something like this –
Buffering-
You can create progress for buffering as below –
Material Design Lite Buffering Progress Bar Example:
<br/> <br/> <div id="myId3" class="mdl-progress mdl-js-progress"></div> |
If you run the above example it will produce output something like this –
Options
- mdl-js-progressbBmdl-js-progress(Required) This is used to Assign basic MDL behavior to progress indicator.
- mdl-progress–indeterminate(Optional) Applies animation effect
Spinner
The material design lite spinner component is basically an enhanced replacement of the classic “wait cursor”. It is used to indicate some ongoing progress.
The spinner consists of an open circle it changes colors as animates in a clockwise direction and it indicates that process has been started and waiting to
complete.
Default Spinner-
Default spinner changes color as it rotates and animates. You can create default spinner simply as below –
Material Design Lite Default Spinner Example:
<div class="mdl-spinner mdl-js-spinner is-active"></div> |
If you run the above example it will produce output something like this –
Single Color Spinner-
If you do not want to change the spinner color as it rotates you can use single color spinner. You can create single color spinner simply as below –
Material Design Lite single Spinner Example:
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div> |
If you run the above example it will produce output something like this –
Options
- mdl-spinner(Required) This is used to define the container as an MDL spinner component.
- mdl-js-spinneris-active(Required) This is used to assign the basic MDL behavior to spinner and makes the spinner visible and animated.
- mdl-spinner–single-color(Optional) Applies single color instead of changing color in animation.