Steps

Steps описывает wizard-flow, onboarding и последовательные процессы с текущим, завершенным и недоступным шагом.

  1. Account

    Basic profile data is ready.

  2. Plan

    Billing plan is selected.

  3. 3

    Confirm

    Review settings before launch.

  4. 4

    Launch

    Available after confirmation.

  1. Queued

    Job accepted and waiting for worker slot.

  2. 2

    Running

    Current task is processing input data.

  3. 3

    Report

    Final summary appears after completion.

Steps HTML 
<ol class="steps">
  <li class="step step-complete">
    <span class="step-marker"><i class="ph ph-check"></i></span>
    <h3 class="step-title">Account</h3>
    <p class="step-text">Basic profile data is ready.</p>
  </li>
  <li class="step step-current" aria-current="step">
    <span class="step-marker">2</span>
    <h3 class="step-title">Confirm</h3>
    <p class="step-text">Review settings before launch.</p>
  </li>
  <li class="step step-disabled">
    <span class="step-marker">3</span>
    <h3 class="step-title">Launch</h3>
    <p class="step-text">Available after confirmation.</p>
  </li>
</ol>
Vertical Steps HTML 
<ol class="steps steps-vertical">
  <li class="step step-complete">
    <span class="step-marker"><i class="ph ph-check"></i></span>
    <h3 class="step-title">Queued</h3>
    <p class="step-text">Job accepted and waiting for worker slot.</p>
  </li>
  <li class="step step-current" aria-current="step">
    <span class="step-marker">2</span>
    <h3 class="step-title">Running</h3>
    <p class="step-text">Current task is processing input data.</p>
  </li>
</ol>