Material Design Lite - Spinners

Advertisements

Previous Page
Next Page  

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

Live Demo 
<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