PROGRESS BAR: Displays task or process completion status
VARIANTS: primary | success | danger | warning | info
SIZES: default (6px) | md (10px) | lg (16px)
MODES: determinate (fixed %) | indeterminate (bouncing)

Use progress bars to show how far along a process is. Choose determinate when the percentage is known, or indeterminate when the duration is unknown.

Basic States

Determinate progress: Set the bar width to reflect completion percentage. Uses .tw-progress-bar-primary by default.

0% — Not started

25% — Quarter complete

50% — Half complete

75% — Three quarters

100% — Complete

<div class="tw-progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="tw-progress-bar tw-progress-bar-primary" style="width: 50%"></div>
</div>

Color Variants

Semantic colors: Use color variants to convey meaning. Primary for general progress, success for completion, danger for critical limits, warning for caution, and info for informational processes.

Primary — .tw-progress-bar-primary

Success — .tw-progress-bar-success

Danger — .tw-progress-bar-danger

Warning — .tw-progress-bar-warning

Info — .tw-progress-bar-info

<div class="tw-progress-bar tw-progress-bar-success" style="width: 60%"></div>

Size Variants

Three sizes: Default (6px), medium (10px), and large (16px). Add .tw-progress-md or .tw-progress-lg to the track element.

Default (6px) — .tw-progress

Medium (10px) — .tw-progress .tw-progress-md

Large (16px) — .tw-progress .tw-progress-lg

<div class="tw-progress tw-progress-lg">...</div>

Animated Progress (Demo)

Stimulus-driven animation: The progress controller animates the bar from 0% to 100% over a configurable duration. Set data-progress-loop-value="true" to repeat continuously.

Looping animation (3 seconds per cycle)

Looping animation — success color (5 seconds)

<div data-controller="progress" data-progress-animate-value="true" data-progress-loop-value="true">
  <div class="tw-progress">
    <div class="tw-progress-bar tw-progress-bar-primary" data-progress-target="bar"></div>
  </div>
</div>

Indeterminate Progress

Unknown duration: When you cannot determine the percentage, use .tw-progress-indeterminate on the track. The bar bounces continuously using a CSS-only animation. No JavaScript required.

Primary — indeterminate

Success — indeterminate

Danger — indeterminate

Warning — indeterminate

Info — indeterminate

<div class="tw-progress tw-progress-indeterminate" role="progressbar" aria-label="Loading...">
  <div class="tw-progress-bar tw-progress-bar-primary"></div>
</div>

Indeterminate — Size Variants

Sizes work with indeterminate too: Combine .tw-progress-indeterminate with .tw-progress-md or .tw-progress-lg.

Default (6px) — indeterminate

Medium (10px) — indeterminate

Large (16px) — indeterminate

<div class="tw-progress tw-progress-lg tw-progress-indeterminate">...</div>

Use Case Examples

In context: Progress bars within realistic UI scenarios.

File Upload

application-form.pdf 72%

Uploading... 1.4 MB of 2.0 MB

Application Form Completion

Personal Details Complete
Academic History In Progress
Supporting Documents Not Started

Processing Applications

Generating reports for Year 7 intake 2026...