Material Design Lite - Spinners

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher les différents types de fileurs. Le tableau suivant répertorie les classes disponibles et leurs effets.

N ° Sr. Nom et description de la classe
1

mdl-spinner

Identifie un conteneur en tant que composant spinner MDL et est une classe obligatoire.
2

mdl-js-spinner

Définit le comportement MDL de base sur spinner et est une classe obligatoire.
3

is-active

Affiche et anime le spinner et est facultatif.
4

mdl-spinner--single-color

Utilise une seule couleur au lieu de changer de couleur et est facultatif.

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation du mdl-spinner classes et les différents types de fileurs.

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>

Résultat

Vérifiez le résultat.