Progress indicator

El indicador de progreso es una representación visual del progreso de un usuario a través de un conjunto de pasos. Guían al usuario a través de una secuencia para completar un proceso específico.

Variaciones y tipos

  • Los indicadores de progreso se usarán para acompañar al usuario en la tarea de completar una tarea específica. Al dividir el objetivo final en subtareas más pequeñas, aumenta el porcentaje de finalización a medida que se completa cada tarea.
  • Es necesario mantener al usuario informado de dónde se encuentra dentro del proceso o la tarea. Esto ayuda al usuario a saber dónde está en relación con dónde ha estado y qué secciones debe seguir.

Stepper

Demo en vivo

<ul class="rds-progress">
    <li class="rds-progress__step">
      <button type="button" class="rds-progress__btn" >1</button>
    </li>
    <li class="rds-progress__step">
      <button type="button" class="rds-progress__btn" disabled>2</button>
    </li>
    <li class="rds-progress__step">
      <button type="button" class="rds-progress__btn" disabled>3</button>
    </li>
    <li class="rds-progress__step">
      <button type="button" class="rds-progress__btn" disabled>4</button>
    </li></ul>
<ul class="rds-progress">
    <li class="rds-progress__step">
      <button type="button" class="rds-progress__btn rds-progress__btn--completed" >1</button>
    </li>
    <li class="rds-progress__step">
      <button type="button" class="rds-progress__btn rds-progress__btn--completed" >2</button>
    </li>
    <li class="rds-progress__step">
      <button type="button" class="rds-progress__btn" >3</button>
    </li>
    <li class="rds-progress__step">
      <button type="button" class="rds-progress__btn" disabled>4</button>
    </li></ul>
<ul class="rds-progress rds-progress--completed">
    <li class="rds-progress__step">
      <button type="button" class="rds-progress__btn rds-progress__btn--completed" >1</button>
    </li>
    <li class="rds-progress__step">
      <button type="button" class="rds-progress__btn rds-progress__btn--completed" >2</button>
    </li>
    <li class="rds-progress__step">
      <button type="button" class="rds-progress__btn rds-progress__btn--completed" >3</button>
    </li>
    <li class="rds-progress__step">
      <button type="button" class="rds-progress__btn rds-progress__btn--completed" >4</button>
    </li></ul>

Estados

  • Active
    Su estado por defecto.

  • Success
    Estado al completarse el paso en cuestión.

  • Completed
    Estado al completarse todos los pasos del proceso.

  • Invalid
    Paso no válido.

  • Disabled
    Estado en el que no puede ser modificado por los usuarios.