Componente

Progress

Indicatori di avanzamento: barra sottile su <progress> nativo, ciambella daisyUI radial-progress, spinner e pulsante in caricamento.

Riferimento: <it-progress>, <it-progress-donut>, <it-spinner>
Classi: ita-progressita-progress-successita-progress-warningita-progress-dangerita-progress-infoita-progress-mdita-progress-lgita-progress-fieldita-progress-labelita-donutita-donut-smita-spinnerita-spinner-smita-spinner-lgita-tone-successita-btn-loadingita-btn-progress
Basato su (daisyUI): progressradial-progressloadingbtn
Solo CSS: Senza value la barra è indeterminata e daisyUI la anima. Per aggiornare il valore nel tempo serve JavaScript (o una nuova pagina dal server). Lo spinner è dentro role=status con un testo nascosto, così viene annunciato.
Storybook: Apri le storie di Progress

Barra

Caricamento del documento

Spazio usato

Mostra il codice HTML

<div class="flex flex-col gap-6">
<progress id="progress-1" class="ita-progress" value="25" max="100" aria-label="Avanzamento"></progress>
<div class="ita-progress-field">
  <div class="ita-progress-label">
    <label for="progress-2">Caricamento del documento</label><span aria-hidden="true">50%</span>
  </div>
  <progress id="progress-2" class="ita-progress" value="50" max="100"></progress>
</div>
<div class="ita-progress-field">
  <div class="ita-progress-label">
    <label for="progress-3">Spazio usato</label><span aria-hidden="true">75%</span>
  </div>
  <progress id="progress-3" class="ita-progress ita-progress-md" value="75" max="100"></progress>
</div>
</div>

Colori

primary

success

info

warning

danger

Mostra il codice HTML

<div class="flex flex-col gap-6">
<div class="ita-progress-field">
  <div class="ita-progress-label">
    <label for="progress-4">primary</label><span aria-hidden="true">20%</span>
  </div>
  <progress id="progress-4" class="ita-progress" value="20" max="100"></progress>
</div>
<div class="ita-progress-field">
  <div class="ita-progress-label">
    <label for="progress-5">success</label><span aria-hidden="true">38%</span>
  </div>
  <progress id="progress-5" class="ita-progress ita-progress-success" value="38" max="100"></progress>
</div>
<div class="ita-progress-field">
  <div class="ita-progress-label">
    <label for="progress-6">info</label><span aria-hidden="true">56%</span>
  </div>
  <progress id="progress-6" class="ita-progress ita-progress-info" value="56" max="100"></progress>
</div>
<div class="ita-progress-field">
  <div class="ita-progress-label">
    <label for="progress-7">warning</label><span aria-hidden="true">74%</span>
  </div>
  <progress id="progress-7" class="ita-progress ita-progress-warning" value="74" max="100"></progress>
</div>
<div class="ita-progress-field">
  <div class="ita-progress-label">
    <label for="progress-8">danger</label><span aria-hidden="true">92%</span>
  </div>
  <progress id="progress-8" class="ita-progress ita-progress-danger" value="92" max="100"></progress>
</div>
</div>

Indeterminata

Ricerca in corso

Verifica dei dati

Mostra il codice HTML

<div class="flex flex-col gap-6">
<div class="ita-progress-field">
  <div class="ita-progress-label">
    <label for="progress-9">Ricerca in corso</label>
  </div>
  <progress id="progress-9" class="ita-progress"></progress>
</div>
<div class="ita-progress-field">
  <div class="ita-progress-label">
    <label for="progress-10">Verifica dei dati</label>
  </div>
  <progress id="progress-10" class="ita-progress ita-progress-success ita-progress-md"></progress>
</div>
</div>

Ciambella

30%

75%

90%

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-8">
<div class="ita-donut" style="--value:30" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" aria-label="Completamento"><span>30%</span></div>
<div class="ita-donut ita-tone-success" style="--value:75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="Pratiche evase"><span>75%</span></div>
<div class="ita-donut ita-donut-sm ita-tone-warning" style="--value:90" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" aria-label="Completamento"><span>90%</span></div>
</div>

Spinner

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-8">
<span role="status" class="ita-spinner ita-spinner-sm"><span aria-hidden="true"></span><span class="sr-only">Caricamento in corso</span></span>
<span role="status" class="ita-spinner"><span aria-hidden="true"></span><span class="sr-only">Caricamento in corso</span></span>
<span role="status" class="ita-spinner ita-spinner-lg"><span aria-hidden="true"></span><span class="sr-only">Caricamento in corso</span></span>
<span role="status" class="ita-spinner ita-tone-success"><span aria-hidden="true"></span><span class="sr-only">Caricamento in corso</span></span>
</div>

Pulsante in caricamento

Mostra il codice HTML

<div class="flex flex-wrap items-center gap-8">
<button type="button" class="ita-btn ita-btn-primary gap-2" disabled><span class="ita-btn-loading" aria-hidden="true"></span><span>Invio…</span></button>
<button type="button" class="ita-btn ita-btn-primary relative overflow-hidden" aria-busy="true">
  <span>Caricamento file</span>
  <progress class="ita-btn-progress" value="45" max="100" aria-label="Caricamento file"></progress>
</button>
</div>