Progress tracker

Progress Tracker

Step completed

Step doing

Step incomplete

First sub-step

Sub-step doing

Sub-step completed

Sub-step disabled

Last sub-step

Step disabled

Process completed

Voorbeeld HTML

<div class="rvo-progress-tracker">
  <div class="rvo-progress-tracker__step rvo-progress-tracker__step--md rvo-progress-tracker__step--start rvo-image-bg-progress-tracker-start-end-md--after rvo-progress-tracker__step--straight rvo-image-bg-progress-tracker-line-straight--before">
    Progress Tracker
  </div>
  <div class="rvo-progress-tracker__step rvo-progress-tracker__step--md rvo-progress-tracker__step--completed rvo-image-bg-progress-tracker-completed-md--after rvo-progress-tracker__step--straight rvo-image-bg-progress-tracker-line-straight--before">
    <a class="rvo-link rvo-progress-tracker__step-link" href="#">
      Step completed
    </a>
  </div>
  <div class="rvo-progress-tracker__step rvo-progress-tracker__step--md rvo-progress-tracker__step--doing rvo-image-bg-progress-tracker-doing-md--after rvo-progress-tracker__step--straight rvo-image-bg-progress-tracker-line-straight--before">
    <a class="rvo-link rvo-progress-tracker__step-link" href="#">
      Step doing
    </a>
  </div>
  <div class="rvo-progress-tracker__step rvo-progress-tracker__step--md rvo-progress-tracker__step--incomplete rvo-image-bg-progress-tracker-incomplete-md--after rvo-progress-tracker__step--substep-start rvo-image-bg-progress-tracker-line-substep-start--before">
    <a class="rvo-link rvo-progress-tracker__step-link" href="#">
      Step incomplete
    </a>
  </div>
  <div class="rvo-progress-tracker__step rvo-progress-tracker__step--sm rvo-progress-tracker__step--incomplete rvo-image-bg-progress-tracker-incomplete-sm--after rvo-progress-tracker__step--straight rvo-image-bg-progress-tracker-line-straight--before">
    <a class="rvo-link rvo-progress-tracker__step-link" href="#">
      First sub-step
    </a>
  </div>
  <div class="rvo-progress-tracker__step rvo-progress-tracker__step--sm rvo-progress-tracker__step--doing rvo-image-bg-progress-tracker-doing-sm--after rvo-progress-tracker__step--straight rvo-image-bg-progress-tracker-line-straight--before">
    <a class="rvo-link rvo-progress-tracker__step-link" href="#">
      Sub-step doing
    </a>
  </div>
  <div class="rvo-progress-tracker__step rvo-progress-tracker__step--sm rvo-progress-tracker__step--completed rvo-image-bg-progress-tracker-completed-sm--after rvo-progress-tracker__step--straight rvo-image-bg-progress-tracker-line-straight--before">
    <a class="rvo-link rvo-progress-tracker__step-link" href="#">
      Sub-step completed
    </a>
  </div>
  <div class="rvo-progress-tracker__step rvo-progress-tracker__step--sm rvo-progress-tracker__step--disabled rvo-image-bg-progress-tracker-incomplete-sm--after rvo-progress-tracker__step--straight rvo-image-bg-progress-tracker-line-straight--before">
    Sub-step disabled
  </div>
  <div class="rvo-progress-tracker__step rvo-progress-tracker__step--sm rvo-progress-tracker__step--incomplete rvo-image-bg-progress-tracker-incomplete-sm--after rvo-progress-tracker__step--substep-end rvo-image-bg-progress-tracker-line-substep-end--before">
    <a class="rvo-link rvo-progress-tracker__step-link" href="#">
      Last sub-step
    </a>
  </div>
  <div class="rvo-progress-tracker__step rvo-progress-tracker__step--md rvo-progress-tracker__step--disabled rvo-image-bg-progress-tracker-incomplete-md--after rvo-progress-tracker__step--straight rvo-image-bg-progress-tracker-line-straight--before">
    Step disabled
  </div>
  <div class="rvo-progress-tracker__step rvo-progress-tracker__step--md rvo-progress-tracker__step--end rvo-image-bg-progress-tracker-start-end-md--after">
    Process completed
  </div>
</div>

Open in nieuwe tab

Regels:

• Gebruik altijd een progress tracker in plaats van bijvoorbeeld tabbladen voor stappen in een formulier.