Search within TutorialsPark

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 Spinner

Give 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 Color

Give it a TRY! » Note: A Primary theme color is selected as the color of the spinner.


Material Design Lite : Progress Bar 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