CSS

【CSS】プロセスのステップを示すProgress Tracker

September 17, 2017
Progress Tracker

Progress Trackerはマルチステップ・フォーム、タイムライン、クイズなど、プロセスのステップを示す柔軟なコンポーネント。

Usage

<ul class="progress-tracker">
  <li class="progress-step is-complete">
    <span class="progress-marker"></span>
  </li>
  <li class="progress-step is-complete">
    <span class="progress-marker"></span>
  </li>
  <li class="progress-step is-active">
    <span class="progress-marker"></span>
  </li>
  <li class="progress-step">
    <span class="progress-marker"></span>
  </li>
  <li class="progress-step">
    <span class="progress-marker"></span>
  </li>
</ul>

MIT