Retours et chargement

Progression et chargement

nouveauClasses hb-progress hb-progress-label hb-progress--busy hb-progress-success hb-progress-warning hb-progress-danger hb-spinner hb-spinner-lg hb-loadingVuetify 2 v-progress-linear, v-progress-circular indeterminate, v-btn loadingVuetify 3 v-progress-linear, v-progress-circular, v-btn loading

Lequel choisir

Situation	Composant
avancement connu (inventaire à 62 %, import 3/10)	`hb-progress` avec `--value` et un libellé `hb-progress-label`
attente courte sans avancement connu	`hb-spinner` dans le bouton, ou `hb-progress--busy` sous un en-tête
une carte ou une page qui charge	`hb-loading` par-dessus un squelette, ou le squelette seul si c'est rapide
un taux qui porte un jugement (stock de glace à 18 %)	`hb-progress-danger` / `-warning` / `-success`

Inventaire du rayon62 %

Stock de glace18 %

Synchronisationen cours

Chargement des factures…

Code

<div class="hb-stack" style="max-width:480px">
  <div><div class="hb-progress-label"><span>Inventaire du rayon</span><span>62 %</span></div><div class="hb-progress"><i style="--value: 62%"></i></div></div>
  <div><div class="hb-progress-label"><span>Stock de glace</span><span>18 %</span></div><div class="hb-progress hb-progress-danger"><i style="--value: 18%"></i></div></div>
  <div><div class="hb-progress-label"><span>Synchronisation</span><span>en cours</span></div><div class="hb-progress hb-progress--busy"><i></i></div></div>
  <div class="hb-row"><span class="hb-spinner" role="status" aria-label="Chargement"></span><span class="hb-spinner hb-spinner-lg" role="status" aria-label="Chargement"></span><button class="hb-btn hb-btn-primary" disabled><span class="hb-spinner" style="border-color:var(--on-brand);border-top-color:transparent;opacity:.7"></span>Enregistrement…</button></div>
  <div class="hb-card" style="position:relative;overflow:hidden"><div class="hb-card-body hb-skeleton-pulse"><span class="hb-skeleton hb-skeleton--text"></span><span class="hb-skeleton"></span></div><div class="hb-loading"><span class="hb-spinner hb-spinner-lg"></span><span>Chargement des factures…</span></div></div>
</div>

Règles

Un bouton en cours d'action est disabled, garde son libellé au présent progressif (« Enregistrement… ») et montre l'anneau ; l'écran ne se bloque pas en entier.
La barre porte role="progressbar", aria-valuenow, aria-valuemin, aria-valuemax ; l'anneau role="status" avec un aria-label.
Pas de chargement pour moins de 300 ms : on affiche directement le résultat. Au-delà de 10 s, un texte dit ce qu'on attend.