Progress

Progress закрывает загрузку, usage meters и staged progress для операций с понятным состоянием выполнения.

Bars

Build 64%

Sync 42%

Storage 78%

312 GB used from 400 GB limit.

Queued Build Deploy Verify

Loading state

Progress Bar HTML

<div class="progress" role="progressbar" aria-label="Build progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64" style="--progress-value: 64%">
  <div class="progress-header">
    <span>Build</span>
    <span class="progress-value">64%</span>
  </div>
  <div class="progress-track">
    <span class="progress-bar"></span>
  </div>
</div>

Usage Meter HTML

<div class="usage-meter">
  <h3 class="usage-meter-title">
    Storage
    <span class="usage-meter-value">78%</span>
  </h3>
  <div class="progress progress-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="78" style="--progress-value: 78%">
    <div class="progress-track">
      <span class="progress-bar"></span>
    </div>
  </div>
  <p class="usage-meter-meta">312 GB used from 400 GB limit.</p>
</div>

Staged Progress HTML

<div class="progress-stages" aria-label="Deploy stages">
  <span class="progress-stage progress-stage-complete">Queued</span>
  <span class="progress-stage progress-stage-complete">Build</span>
  <span class="progress-stage progress-stage-current">Deploy</span>
  <span class="progress-stage">Verify</span>
</div>