Progression
Les barres de progression incluent les barres de progression linéaires et les barres de progression circulaires.
Utilisation
La barre de progression linéaire est écrite en CSS pur ; il suffit d’écrire du code HTML pour l’activer.
La barre de progression circulaire s’initialise automatiquement après le chargement de la page. Pour les barres de progression circulaires générées dynamiquement, vous devez appeler mdui.mutation() pour l’initialiser.
Couleurs
La barre de progression linéaire utilise la couleur principale.
La barre de progression circulaire utilise la couleur principale ou plusieurs couleurs.
Barre de progression linéaire
Progression indéterminée
Ce composant est utilisé lorsqu’on ne connaît pas précisément la valeur de progression.
<div class="mdui-progress">
<div class="mdui-progress-indeterminate"></div>
</div>Progression déterminée
Ce composant est utilisé lorsqu’on connaît précisément la valeur de progression.
Vous pouvez modifier la valeur de l’attribut width de l’élément <div class="mdui-progress-determinate"></div> pour mettre à jour la progression.
<div class="mdui-progress">
<div class="mdui-progress-determinate" style="width: 30%;"></div>
</div>Barre de progression circulaire
Il suffit d’ajouter l’élément <div class="mdui-spinner"></div> pour créer une barre de progression circulaire. Ajoutez la classe .mdui-spinner-colorful pour créer une barre de progression circulaire colorée.
Vous pouvez modifier les valeurs des propriétés width et height de la classe .mdui-spinner pour changer la taille du composant, mais les valeurs de width et height doivent rester égales.
Barre de progression circulaire générée dynamiquement
Si votre composant de barre de progression circulaire est généré dynamiquement, vous devez appeler mdui.mutation() pour l’initialiser.
Si vous devez modifier un composant de barre de progression circulaire existant, vous devez appeler la méthode mdui.updateSpinners() pour réinitialiser le composant. Cette méthode peut accepter un sélecteur CSS (qui doit contenir la classe .mdui-spinner), un élément DOM ou un tableau d’éléments DOM en argument, pour réinitialiser uniquement les composants spécifiés. Si aucun argument n’est fourni, toutes les barres de progression circulaires de la page seront réinitialisées.
Classes CSS
| Nom de classe | Description |
|---|---|
.mdui-progress | Définir une barre de progression linéaire. |
.mdui-progress-indeterminate | Barre de progression linéaire à progression indéterminée. |
.mdui-progress-determinate | Barre de progression linéaire à progression déterminée. |
.mdui-spinner | Définir une barre de progression circulaire. |
.mdui-spinner-colorful | Barre de progression circulaire colorée. |