Étapes

Anneau — mobile

--step: 1
1/4
--step: 2
2/4
--step: 3
3/4
--step: 4
4/4

Rail — desktop

étape 1
  1. Étape 1Sujet de veille
  2. Étape 2Type de veille
  3. Étape 3Rythme de veille
  4. Étape 4Démarrage
étape 2
  1. Étape 1Sujet de veille
  2. Étape 2Type de veille
  3. Étape 3Rythme de veille
  4. Étape 4Démarrage
étape 3
  1. Étape 1Sujet de veille
  2. Étape 2Type de veille
  3. Étape 3Rythme de veille
  4. Étape 4Démarrage
étape 4
  1. Étape 1Sujet de veille
  2. Étape 2Type de veille
  3. Étape 3Rythme de veille
  4. Étape 4Démarrage

États du nœud

done
done
data-step-to
current
todo

Balisage

<ol class="ice-stepper" data-variant="rail">
  <!-- data-step-back : la vue où revient cette étape.
       ui.js la recopie en data-step-to quand elle est faite -->
  <li class="ice-step" data-state="done" data-step-back="1.2">
    <i data-icon="check"></i>
    <span class="ice-step__label">
      <span class="ice-step__n">Étape 1</span>
      <span class="ice-step__name">Sujet de veille</span>
    </span>
  </li>
  <li class="ice-stepper__link"></li>
</ol>

<div class="ice-ring" style="--step:3; --steps:4">
  <span class="ice-ring__value">3</span><span class="ice-ring__total">/4</span>
</div>