- Material Design Lite Tutorial
- MDL - Home
- MDL - Overview
- MDL - Environment Setup
- MDL - Layouts
- MDL - Grids
- MDL - Tabs
- MDL - Footers
- MDL - Badges
- MDL - Buttons
- MDL - Cards
- MDL - Progress Bars
- MDL - Spinners
- MDL - Menus
- MDL - Sliders
- MDL - Checkboxes
- MDL - Radio Buttons
- MDL - Icons
- MDL - Switches
- MDL - DataTable
- MDL - Textfields
- MDL - Tooltips
- Material Design Lite Resources
- MDL - Quick Guide
- MDL - Useful Resources
- MDL - Discussion
Material Design Lite - Spinners
MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of spinners. The following table lists down the available classes and their effects.
Sr.No. | 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 animates 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 will help you understand the use of the mdl-spinner classes and the 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>
Result
Verify the result.
Advertisements
To Continue Learning Please Login
Login with Google