MDL : Spinners
How to use MDL - Material Design Lite create Spinners
Material Design Lite (MDL) : Spinners
Material Design Lite(MDL) component spinner is to create a enhanced 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.
Example: Material Design Lite (MDL) Spinner Default SpinnerGive it a TRY! » 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.
Example: Material Design Lite (MDL) Spinner Single ColorGive it a TRY! » Note: A Primary theme color is selected as the color of the spinner.
Material Design Lite : Progress Bar Classes
|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|