Material Design Lite - Spinners

Quiz

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.

Print Page