The MDL provides various CSS classes to apply various predefined
visual and behavioral enhancements to the display various types of
spinners. The below table mentions the available classes and their
effects.
mdl_spinners.htm
| S.N. | Class Name & Description |
|---|---|
| 1 | mdl-spinner Identifies a container as MDL spinner component and is a required class. |
| 2 | mdl-js-spinner Sets basic MDL behavior to spinner and is a required class. |
| 3 | is-active Shows and animate the spinner and is optional. |
| 4 | mdl-spinner--single-color Uses a single color instead of changing colors and is optional. |
Example
The following example showcases the use of mdl-spinner classes to show different types of spinners.mdl_spinners.htm
<html> <head> <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script> <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <h4>Default Spinner</h4> <div class="mdl-spinner mdl-js-spinner is-active"></div> <h4>Single Color Spinner</h4> <div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div> </body> </html>
No comments:
Post a Comment