Progreso (progress)

El elemento nativo <progress>, con estilo. Dale una etiqueta visible con <label for> o un aria-label. Sin value es indeterminado y se anima; con la reducción de movimiento activada, la animación se detiene.

CSS: css/components/progress.css (dentro de ivolt.css).

Una barra determinadafixtures/progress/basic.htmlAbrir sola

<div class="iv-stack iv-u-gap-5" style="max-width: 28rem">
  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-upload">Uploading assets — 72%</label>
    <progress class="iv-progress" id="pr-upload" value="72" max="100"></progress>
  </div>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-small">Cache warm-up — 35% (small)</label>
    <progress class="iv-progress iv-progress--sm" id="pr-small" value="35" max="100"></progress>
  </div>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-restore">Restoring the index — 96%</label>
    <progress class="iv-progress iv-progress--lg" id="pr-restore" value="96" max="100"></progress>
  </div>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-indeterminate">Contacting the registry — progress unknown</label>
    <progress class="iv-progress" id="pr-indeterminate"></progress>
  </div>

  <p class="iv-u-m-0 iv-u-text-sm">
    The bar is cobalt by default: a progress bar reports how far along something
    is, not whether it went well. Each one keeps a visible label that states the
    value in words; the colour is never the only information. Without a
    <code>value</code> the bar is indeterminate, and under
    <code>prefers-reduced-motion</code> it stops moving and stays a full subtle
    track.
  </p>

  <h2 class="iv-u-text-lg iv-u-m-0">Semantic tones</h2>

  <p class="iv-u-m-0 iv-u-text-sm">
    One example each, for the cases where the bar really does carry a verdict.
  </p>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-tests">Tests passed — 148 of 152</label>
    <progress class="iv-progress iv-progress--success" id="pr-tests" value="148" max="152"></progress>
  </div>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-storage">Storage used — 8.6 GB of 10 GB</label>
    <progress class="iv-progress iv-progress--warning" id="pr-storage" value="8.6" max="10"></progress>
  </div>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-budget">CSS budget spent — 44.2 kB of 45 kB</label>
    <progress class="iv-progress iv-progress--danger" id="pr-budget" value="44.2" max="45"></progress>
  </div>
</div>

Tamaños

Tres grosores y un local público. iv-progress--sm son 0,25rem, el valor por defecto 0,5rem y iv-progress--lg 1rem con radio completo; los tres solo fijan --iv-progress-size, así que cualquier otro grosor es una declaración en el elemento. Añadido en la v0.6, junto con el cambio de nombre: --iv-progress-size sustituye al --iv-progress-height de la v0.1 a la v0.5.

Tres tamaños y un grosor a medidafixtures/progress/sizes.htmlAbrir sola

<div class="iv-stack iv-u-gap-5" style="max-width: 28rem">
  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-size-sm">Cache warm-up — 35% (small)</label>
    <progress class="iv-progress iv-progress--sm" id="pr-size-sm" value="35" max="100"></progress>
  </div>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-size-md">Uploading assets — 72% (default)</label>
    <progress class="iv-progress" id="pr-size-md" value="72" max="100"></progress>
  </div>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-size-lg">Import finished — 100% (large)</label>
    <progress class="iv-progress iv-progress--lg iv-progress--success" id="pr-size-lg" value="100" max="100"></progress>
  </div>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-size-custom">Storage used — 8.6 GB of 10 GB (custom thickness)</label>
    <progress class="iv-progress iv-progress--warning" id="pr-size-custom" style="--iv-progress-size: 0.75rem" value="8.6" max="10"></progress>
  </div>

  <p class="iv-u-m-0 iv-u-text-sm">
    Three sizes plus the public local: <code>--iv-progress-size</code> is
    0.5rem by default, 0.25rem with <code>iv-progress--sm</code> and 1rem with
    <code>iv-progress--lg</code>. Every bar keeps a visible label that states
    the value in words.
  </p>
</div>

.iv-root {
  --iv-progress-size: 0.75rem;
}

Modificadores y locales

--sm y --lg para el grosor; --success --warning --danger para el color de la barra. Locales públicos: --iv-progress-size (grosor de la pista), --iv-progress-color (la barra), --iv-progress-track y --iv-progress-track-subtle (el canal de detrás) y --iv-progress-groove (su sombra interior, dibujada con --iv-color-hover-surface).

Errores frecuentes

Un div con un fondo en lugar del elemento nativo.
Progreso sin etiqueta o sin max.

Índice de clases

Partes y modificadores de esta familia que los ejemplos de arriba no muestran. La lista completa por hoja está en la referencia.

Clase	Qué hace
`iv-progress--success`	Tono de éxito de la barra.
`iv-progress--warning`	Tono de aviso.
`iv-progress--danger`	Tono de peligro.

Todos los componentes de contenido

Todos los componentes interactivos

Navegar

Progreso (progress)

Tamaños

Modificadores y locales

Errores frecuentes

Índice de clases