Material Design Lite - Barres de progression
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 barres de progression. Le tableau suivant mentionne les classes disponibles et leurs effets.
| N ° Sr. | Nom et description de la classe |
|---|---|
| 1 | mdl-js-progress Définit le comportement MDL de base en indicateur de progression et est une classe obligatoire. |
| 2 | mdl-progress__indeterminate Définit l'animation sur l'indicateur de progression et est une classe facultative. |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation du mdl-js-progress classes pour afficher les différents types de barres de progression.
mdl_progressbars.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 Progress bar</h4>
<div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
<h4>Indeterminate Progress bar</h4>
<div id = "progressbar2"
class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<h4>Buffering Progress bar</h4>
<div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>
<script language = "javascript">
document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(33);
this.MaterialProgress.setBuffer(87);
});
</script>
</body>
</html>Résultat
Vérifiez le résultat.