Progress

A progress bar showing completion percentage. Built on the native <progress> element.

Component Skill — components/progress/component-skill.md

Native basis

<progress> element with CSS styling for the track and indicator bar.

Web Platform APIs

<progress> ::-webkit-progress-bar ::-webkit-progress-value ::-moz-progress-bar

Classes

.progress

Accessibility

• <progress> is natively accessible — screen readers announce the percentage

• The text content inside <progress> is the fallback for non-supporting browsers

• Use aria-label if the progress bar lacks a visible label

Determinate

Shows a specific completion percentage.

66%

<progress class="progress" value="66" max="100">66%</progress>

Values

Different completion amounts.

10% 40% 75% 100%

<progress class="progress" value="10" max="100">10%</progress>
<progress class="progress" value="40" max="100">40%</progress>
<progress class="progress" value="75" max="100">75%</progress>

Indeterminate

Animated state when completion amount is unknown. Omit the value attribute.

<progress class="progress" max="100">Loading...</progress>

In Cards

Progress bars composed with .card and .statistic for a dashboard layout.

Storage

75%

Bandwidth

42%

CPU

91%

CSS view file

WebKit (Chrome, Safari, Edge)

@layer components {
  .progress {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height: 0.5rem;
    border: none;
    border-radius: 9999px;
    overflow: hidden;
    background-color: var(--secondary);
  }

  /* WebKit (Chrome, Safari, Edge) */
  .progress::-webkit-progress-bar {
    background-color: var(--secondary);
    border-radius: 9999px;
  }

  .progress::-webkit-progress-value {
    background-color: var(--primary);
    border-radius: 9999px;
    transition: width 300ms ease;
  }

  /* Firefox */
  .progress::-moz-progress-bar {
    background-color: var(--primary);
    border-radius: 9999px;
  }

  /* Indeterminate state */
  .progress:indeterminate {
    background: linear-gradient(
      90deg,
      var(--secondary) 0%,
      var(--primary) 50%,
      var(--secondary) 100%
    );
    background-size: 200% 100%;
    animation: progress-indeterminate 1.5s linear infinite;
  }

  .progress:indeterminate::-webkit-progress-bar {
    background-color: transparent;
  }

  .progress:indeterminate::-moz-progress-bar {
    background-color: transparent;
  }

  @keyframes progress-indeterminate {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
}