Progress Bar

Progress/completion indicator element for displaying task completion, loading states, and goal progress like free shipping thresholds.

Live Preview

Loading...60%

$35 away from FREE shipping!$65 / $100

Code

1<!-- Basic Progress Bar -->
2<div class="progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
3  <div class="progress__bar" style="width: 60%"></div>
4</div>
5
6<!-- Progress Bar with Label -->
7<div class="progress-wrapper">
8  <div class="progress-label">
9    <span>Loading...</span>
10    <span>60%</span>
11  </div>
12  <div class="progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
13    <div class="progress__bar" style="width: 60%"></div>
14  </div>
15</div>
16
17<!-- Free Shipping Progress -->
18<div class="progress-wrapper">
19  <div class="progress-label">
20    <span>$35 away from free shipping!</span>
21    <span>$65 / $100</span>
22  </div>
23  <div class="progress progress--success" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
24    <div class="progress__bar" style="width: 65%"></div>
25  </div>
26</div>

Brand Properties

Properties available in the CRAFT BundleProgressBar component with brand-specific value mappings.

Progress Bar Properties

Property	Type	Brand Default	HoB Value	TAE Value
Height	Input (px)	8	8	8
Offer Price ($)	Input	99	99	99
Filled Color	Color picker (hex)	`#22c55e`	`#038012`	`#1A5129`
Unfilled Color	Color picker (hex)	`#e5e5e5`	`#e5e5e5`	`#e5e5e5`
Completion Toast Text	Text input	FREE GIFT worth $28 also added!	FREE GIFT worth $28 also added!	FREE GIFT worth $28 also added!
Stick to Bottom	Checkbox	Off	Off	Off
Enable "Go to Cart" only after progress is complete	Checkbox	On	On	On
Opacity	Slider	100%	100%	100%
Shadow	Toggle	Off	Off	Off

Category Properties

Property	Type	Brand Default	HoB Value	TAE Value
Category 1 Name	Text input	Full-size	Full-size	Full-size
Products In Offer (Cat 1)	Number input	3	3	3
Item Count Label (Cat 1)	Text input	Full-size	Full-size	Full-size
Category 2 Name	Text input	Minis	Minis	Minis
Products In Offer (Cat 2)	Number input	2	2	2
Item Count Label (Cat 2)	Text input	Minis	Minis	Minis

Variants

Sizes

Small (4px)

Medium (8px)

Large (12px)

Colors

Primary

Success

Warning

Error

With Labels

Profile Completion75%

60%

Use Cases

Free Shipping Progress

You're $35 away from FREE shipping!

Add $35 more to qualify

Order Status Steps

OrderedProcessingShippedDelivered

Loading State

Uploading image...

Accessibility

Use role="progressbar" on the container
Include aria-valuenow, aria-valuemin, aria-valuemax
For indeterminate progress, omit aria-valuenow
Provide text alternatives for important progress indicators
Ensure sufficient color contrast for the bar and track
Consider providing additional context via aria-label

Do's and Don'ts

Do

Show clear progress toward a goal
Use appropriate colors (green for success)
Provide text context when helpful
Animate smoothly during updates
Use for motivating users (shipping thresholds)

Don't

Show fake or misleading progress
Use jarring color transitions
Make bars too thin to see clearly
Forget to indicate completion
Use for non-progress indicators

Unmapped Brand Values

The following brand token values are available but not currently mapped to CRAFT Progress Bar properties.

HoB Brand

Token	Value	Preview
Primary Color	`#038012`
Background	`#FFF9EE`

TAE Brand

Token	Value	Preview
Primary Color	`#1A5129`
Background	`#FFFFFF`

Related Elements

Progress Components - Pre-built progress layouts
Material Progress Indicator - MD3 progress component