Progress Bar

La barre de progression indique à l'utilisateur l'état de chargement ou d'avancement d'une procédure automatique ou d'un parcours client.

Classique

Aperçu

Mode responsive

15% 15% 15% % 15% 15%

                                                        <progress class="progress is-info" value="15" max="100">15%</progress>
                            <progress class="progress is-success" value="15" max="100">15%</progress>
                            <progress class="progress is-warning" value="15" max="100">15%</progress>
                            <progress class="progress is-danger" value="40" max="100">%</progress>
                            <progress class="progress is-primary" value="15" max="100">15%</progress>
                            <progress class="progress is-tertiary" value="15" max="100">15%</progress>

ACCESSIBILITY

Si la couleur de la barre porte un sens sémantique, le préciser via un aria-label pour rester conforme aux exigences d'accessibilité.

Petite

Aperçu

Mode responsive

15% 15% 15% % 15%

                                                        <progress class="progress is-small is-info" value="15" max="100">15%</progress>
                            <progress class="progress is-small is-success" value="15" max="100">15%</progress>
                            <progress class="progress is-small is-warning" value="15" max="100">15%</progress>
                            <progress class="progress is-small is-danger" value="40" max="100">%</progress>
                            <progress class="progress is-small is-primary" value="15" max="100">15%</progress>

DO

La barre de progression fine s'utilise en ajoutant la classe .is-small

Elle peut servir dans les formulaires, par exemple en-dessous du mot de passe, pour déterminer sa fiabilité.

Empilée

Aperçu

Mode responsive

                                                        <div class="progress is-stacked">
                                <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar is-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar is-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>

Avec légende

Aperçu

Mode responsive

15%

illimité

                                                        <progress class="progress is-info" value="15" max="100">15%</progress>
                            <p class="has-text-centered text is-2">illimité</p>

Avec légende aux extrémités

Aperçu

Mode responsive

15%

0 Go

5 Go

                                                        <progress class="progress is-info" value="15" max="100">15%</progress>
                            <div class="columns is-mobile">
                                <div class="column">
                                    <p class="text is-2">0 Go</p>
                                </div>
                                <div class="column is-narrow">
                                    <p class="text is-2">5 Go</p>
                                </div>
                            </div>

Circulaire

Aperçu

Mode responsive

XX Go

Texte lorem

XX Go

Texte lorem

                                                        <div class="progress-circle-group">
                                <div class="progress-circle" style="--secondary: 0; --tertiary: 1; --warning: 0; --empty: 0">
                                    <div class="progress-circle-slice progress-circle-background-secondary"></div>
                                    <div class="progress-circle-slice progress-circle-background-tertiary"></div>
                                    <div class="progress-circle-slice progress-circle-background-warning"></div>
                                    <div class="progress-circle-slice progress-circle-background-empty"></div>
                                    <div class="progress-circle-content">
                                        <div class="progress-circle-title">XX Go</div>
                                    </div>
                                </div>
                
                                <div class="progress-circle" style="--secondary: 0.25; --tertiary: 0.25; --warning: 0; --empty: 0.5">
                                    <div class="progress-circle-slice progress-circle-background-secondary"></div>
                                    <div class="progress-circle-slice progress-circle-background-tertiary"></div>
                                    <div class="progress-circle-slice progress-circle-background-warning"></div>
                                    <div class="progress-circle-slice progress-circle-background-empty"></div>
                                    <div class="progress-circle-content">
                                        <div class="progress-circle-title">XX Go</div>
                                        <div class="progress-circle-sub">Texte lorem</div>
                                    </div>
                                </div>
                
                                <div class="progress-circle" style="--secondary: 0; --tertiary: 0.25; --warning: 0.5; --empty: 0.25">
                                    <div class="progress-circle-slice progress-circle-background-secondary"></div>
                                    <div class="progress-circle-slice progress-circle-background-tertiary"></div>
                                    <div class="progress-circle-slice progress-circle-background-warning"></div>
                                    <div class="progress-circle-slice progress-circle-background-empty"></div>
                                    <div class="progress-circle-content">
                                        <div class="progress-circle-title">XX Go</div>
                                    </div>
                                </div>
                
                                <div class="progress-circle" style="--secondary: 0; --tertiary: 0; --warning: 1; --empty: 0">
                                    <div class="progress-circle-slice progress-circle-background-secondary"></div>
                                    <div class="progress-circle-slice progress-circle-background-tertiary"></div>
                                    <div class="progress-circle-slice progress-circle-background-warning"></div>
                                    <div class="progress-circle-slice progress-circle-background-empty"></div>
                                    <div class="progress-circle-content">
                                        <div class="progress-circle-title has-text-warning">XX Go</div>
                                        <div class="progress-circle-sub has-text-warning">Texte lorem</div>
                                    </div>
                                </div>
                            </div>

DO

1/ La barre de progression circulaire, se compose de 4 couleurs possibles :

progress-circle-background-secondary
progress-circle-background-tertiary
progress-circle-background-warning

Quand une partie de la progress-circle est vide alors on lui ajoute la classe :
progress-circle-background-empty

2/ Les pourcentages se décident dans la propriété style="" de la classe
.progress-circle. Le total de chaque couleur devra faire 100%.

Exemple ci-dessus (ayant un total de 100%):

--secondary: 0 (représente 0%)
--tertiary: 0.25 (représente 25%)
--warning: 0.5 (représente 50%)
--empty: 0.25 (représente 25%)

WARNING

Si on souhaite mettre seulement 2 couleurs, il va falloir quand même les indiquer avec la valeur 0.

La valeur de la couleur "grise" devra être le restant pour avoir un total de 100%.