35/Interacción y estado

Progress bar

Barra de progreso determinada o indeterminada, con etiqueta y valor.

Con etiqueta

Subiendo archivo64%

Almacenamiento2.1 de 10 GB

Procesando

HTML

<div class="flex max-w-[520px] flex-col gap-6">
  <div class="cb-progress">
    <div class="cb-progress__head"><span class="cb-progress__label" id="p1">Subiendo archivo</span><span class="cb-progress__value">64%</span></div>
    <div class="cb-progress__track" role="progressbar" aria-labelledby="p1" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"><div class="cb-progress__bar" style="--cb-progress: 64%"></div></div>
  </div>
  <div class="cb-progress cb-progress--success cb-progress--sm">
    <div class="cb-progress__head"><span class="cb-progress__label" id="p2">Almacenamiento</span><span class="cb-progress__value">2.1 de 10 GB</span></div>
    <div class="cb-progress__track" role="progressbar" aria-labelledby="p2" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100"><div class="cb-progress__bar" style="--cb-progress: 21%"></div></div>
  </div>
  <div class="cb-progress cb-progress--indeterminate">
    <div class="cb-progress__head"><span class="cb-progress__label" id="p3">Procesando</span></div>
    <div class="cb-progress__track" role="progressbar" aria-labelledby="p3"><div class="cb-progress__bar"></div></div>
  </div>
</div>

Clases y modificadores

Clase	Descripción
`.cb-progress`	Contenedor.
`.cb-progress__head`, `.cb-progress__label`, `.cb-progress__value`	Fila superior.
`.cb-progress__track`, `.cb-progress__bar`	Pista y barra. El ancho sale de `--cb-progress`.
`.cb-progress--success\|warning\|danger`	Colores.
`.cb-progress--sm\|lg`	Grosor.
`.cb-progress--indeterminate`	Animación sin valor conocido.

JavaScript

Actualizar desde JS:

track.setAttribute('aria-valuenow', 80);
track.firstElementChild.style.setProperty('--cb-progress', '80%');

Accesibilidad

La pista lleva role="progressbar" con aria-valuenow, aria-valuemin y aria-valuemax.
En el modo indeterminado omite aria-valuenow.