Progress Bar

Progress Bar

The Progress Bar component provides a visual indicator for showing progress, loading states, or proportional values. It supports customization through CSS variables and is fully accessible with proper ARIA attributes.

Preview Code

Copy

Primary Skin, 0%

Primary Skin, 50%

Primary Skin, 100%

Success Skin, 66%

<div class="skin space-y-1">
  <h1 id="progress-primary-0" class="text-md font-bold">Primary Skin, 0%</h1>
  <div
    class="skin-primary progress"
    style="--progress-value: 0"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="0"
    aria-labelledby="progress-primary-0"
  ></div>
  <h1 id="progress-primary-50" class="text-md font-bold">Primary Skin, 50%</h1>
  <div
    class="skin-primary progress"
    style="--progress-value: 0.5"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="50"
    aria-labelledby="progress-primary-50"
  ></div>
  <h1 id="progress-primary-100" class="text-md font-bold">
    Primary Skin, 100%
  </h1>
  <div
    class="skin-primary progress"
    style="--progress-value: 1"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="100"
    aria-labelledby="progress-primary-100"
  ></div>
  <h1 id="progress-success-66" class="text-md font-bold">Success Skin, 66%</h1>
  <div
    class="skin-tertiary progress"
    style="--progress-value: 0.66"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="66"
    aria-labelledby="progress-success-66"
  ></div>
</div>

<div class="skin space-y-1">
  <h1 id="progress-primary-0" class="text-md font-bold">Primary Skin, 0%</h1>
  <div
    class="skin-primary progress"
    style="--progress-value: 0"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="0"
    aria-labelledby="progress-primary-0"
  ></div>
  <h1 id="progress-primary-50" class="text-md font-bold">Primary Skin, 50%</h1>
  <div
    class="skin-primary progress"
    style="--progress-value: 0.5"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="50"
    aria-labelledby="progress-primary-50"
  ></div>
  <h1 id="progress-primary-100" class="text-md font-bold">
    Primary Skin, 100%
  </h1>
  <div
    class="skin-primary progress"
    style="--progress-value: 1"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="100"
    aria-labelledby="progress-primary-100"
  ></div>
  <h1 id="progress-success-66" class="text-md font-bold">Success Skin, 66%</h1>
  <div
    class="skin-tertiary progress"
    style="--progress-value: 0.66"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="66"
    aria-labelledby="progress-success-66"
  ></div>
</div>

Overview

Progress bars communicate the status of processes that take time to complete, such as loading content, uploading files, or indicating the completion level of multi-step processes. The component uses a simple percentage-based system ranging from 0% to 100% and can be styled with different skins to match your design requirements.

Usage

The progress bar component is implemented with a single HTML element and uses CSS pseudo-elements to create the visual indicator. The progress value is controlled through the --progress-value CSS variable, which accepts values from 0 (empty) to 1 (full).

HTML

<div
  class="skin-primary progress"
  style="--progress-value: 0.5"
  role="progressbar"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="50"
  aria-label="Loading progress: 50%"
></div>

CSS Variables

Variable	Default Value	Description
--progress-value	0	Progress fill value (0 to 1)
--progress-height	1rem	Height of the progress bar
--progress-rounding	var(--radius-site)	Border radius of the progress bar

The component uses two key colors that should be set in your skin or theme:

Variable	Description
--color-foreground	Color for the filled portion of the progress bar
--color-background	Color for the unfilled portion of the progress bar

Accessibility

Implemented Accessibility Features

• Semantic structure with appropriate ARIA role (progressbar)
• Clear representation of current state using aria-valuenow
• Proper range definition through aria-valuemin and aria-valuemax
• Descriptive labels using either aria-label or aria-labelledby
• Visual indication of progress that doesn’t rely solely on color
• Consistent styling and behavior across different progress states
• Support for different color themes while maintaining adequate contrast

Accessibility Considerations when Implementing

• Ensure the progress bar has sufficient color contrast between filled and unfilled portions
• Provide additional text descriptions for critical processes when appropriate
• Consider adding supplementary text for screen readers for important milestones
• For processes that take longer than a few seconds, consider adding estimated time remaining
• Update the aria-valuenow attribute dynamically when progress changes
• If using custom labels, ensure they clearly describe the purpose of the progress indicator
• For non-standard ranges, make sure aria-valuemin and aria-valuemax reflect the actual range