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.