Progress bars

Progress bars communicate task status visually, giving users a sense of how much work remains. Use them for lengthy processes like file uploads, installations, or multi-step forms to set expectations and reduce uncertainty. Always pair progress bars with clear labels or percentages so users understand what’s happening at a glance.

Progress bars can be determinate (showing specific progress) or indeterminate (indicating ongoing activity without a set endpoint). Choose the right type based on the task: use determinate bars when you can measure progress, and indeterminate bars for processes where timing is unpredictable. Keep designs simple and avoid overloading users with too many visual cues.

Ensure progress bars are accessible by providing text alternatives and ensuring they work well with screen readers. Use ARIA attributes like aria-valuenow, aria-valuemin, and aria-valuemax to convey progress information. Test across devices and assistive technologies to ensure a smooth experience for all users.

Use the <progress> element with max and value attributes to create a determinate progress bar. The max attribute sets the total value, while the value attribute indicates the current progress.

<progress max="..." value="..."></progress>

A progress bar without a value attribute indicates an indeterminate state, showing that a process is ongoing without specifying how much has been completed.

<progress></progress>

Customize progress bar colors using CSS classes to match your design system or brand guidelines. Below are examples of progress bars with different color classes applied.

Catppuccin hues are available for progress bars as well; reference the Catppuccin palette to keep status treatments consistent with the rest of the system.

<progress class="rosewater"></progress>
<progress class="flamingo"></progress>
<progress class="pink"></progress>
<progress class="mauve"></progress>
<progress class="red"></progress>
<progress class="maroon"></progress>
<progress class="peach"></progress>
<progress class="yellow"></progress>
<progress class="green"></progress>
<progress class="teal"></progress>
<progress class="sky"></progress>
<progress class="sapphire"></progress>
<progress class="blue"></progress>
<progress class="lavender"></progress>
<progress class="gray"></progress>

Click the button to see the progress bar fill up from 0 to 100%.