Stepper

Progreso por pasos: .cl-stepper contiene .cl-step (estados .is-done / .is-current) con un círculo .cl-step-circle, etiqueta .cl-step-label y conectores .cl-step-line entre pasos. Combinalo con una barra .cl-progress / .cl-progress-fill para mostrar el avance del proceso.

Pasos

Un paso .is-done muestra un check; .is-current lo resalta con anillo de foco; los pendientes solo muestran el número.

<div class="cl-stepper">
  <div class="cl-step is-done"><span class="cl-step-circle"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></span><span class="cl-step-label">Definir</span></div>
  <span class="cl-step-line"></span>
  <div class="cl-step is-done"><span class="cl-step-circle"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></span><span class="cl-step-label">Calcular</span></div>
  <span class="cl-step-line"></span>
  <div class="cl-step is-current"><span class="cl-step-circle">3</span><span class="cl-step-label">Revisar</span></div>
  <span class="cl-step-line"></span>
  <div class="cl-step"><span class="cl-step-circle">4</span><span class="cl-step-label">Aprobar</span></div>
  <span class="cl-step-line"></span>
  <div class="cl-step"><span class="cl-step-circle">5</span><span class="cl-step-label">Ejecutar</span></div>
</div>

Barra de progreso

.cl-progress-fill controla el avance con width inline.

<div class="cl-progress"><div class="cl-progress-fill" style="width: 62%"></div></div>

Combinado con progreso

Patrón típico de un wizard: pasos arriba, porcentaje de avance abajo.

<div class="cl-stepper">
  <div class="cl-step is-done"><span class="cl-step-circle"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></span><span class="cl-step-label">Definir</span></div>
  <span class="cl-step-line"></span>
  <div class="cl-step is-done"><span class="cl-step-circle"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></span><span class="cl-step-label">Calcular</span></div>
  <span class="cl-step-line"></span>
  <div class="cl-step is-current"><span class="cl-step-circle">3</span><span class="cl-step-label">Revisar</span></div>
  <span class="cl-step-line"></span>
  <div class="cl-step"><span class="cl-step-circle">4</span><span class="cl-step-label">Aprobar</span></div>
  <span class="cl-step-line"></span>
  <div class="cl-step"><span class="cl-step-circle">5</span><span class="cl-step-label">Ejecutar</span></div>
</div>
<div style="margin-top: 20px">
  <div class="cl-row cl-row--between" style="margin-bottom: 6px; font-size: 12px; color: var(--fg-3)">
    <span>Progreso del proceso</span><span>62%</span>
  </div>
  <div class="cl-progress"><div class="cl-progress-fill" style="width: 62%"></div></div>
</div>