Material Design Lite Spinner
what is spinner in (MDL) ?
- Material Design Lite(MDL) component spinner is to create aenhanced wait cursor different than the classic one.
- The Spinner is used to denote an ongoing process or task, the result of which are yet to be generated.
- A Default Spinner comprises of open ended circle which changing colors as it rotates in clockwise direction, to denote that the process has begun but waiting and not yet completed.
- The purpose of using a spinner is to provide a clue to the user about an ongoing activity, it improves the user experience greatly while user waits for completion of operation.
- No action can be performed on the spinnner, nor does it perform an action when clicked or dragged, simply denotes waiting for uncompleted task.
- Users can apply different color schemes to the spinner, the default spinner has all colors in the theme displayed one after another during the animation.
Material Design Lite(MDL) : Default Spinner
- A MDL Spinner is created using class mdl-spinner
- The Class is-active is used to make the spinner activated.
<div class="main">
<!-- MDL Container using class mdl-spinner -->
<div class="mdl-spinner mdl-js-spinner is-active"></div>
</div><!-- End of .main class -->
Note:The Color of the default spinner changes during animation
Material Design Lite(MDL) Spinner : Single Color
- A MDL Spinner with just one color can be created using class mdl-spinner--single-color
- The class is-active is used to make the spinner active.
<div class="main">
<!-- MDL Container using class mdl-spinner -->
<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
</div><!-- End of .main class -->
Material Design Lite : Spinner Classes
| MDL Class | Description |
|---|---|
| mdl-spinner | To create a container for progress bar. |
| mdl-js-spinner | To assign MDL behaviour to progress bar component |
| is-active | To apply animation effect to MDL progress bar. |
| mdl-spinner--single-color | To create a spinner with only the primary palette instead of multiple colors |