CommunicationMaterial Design 3

Progress Indicator

Progress indicators express an unspecified wait time or display the length of a process. They inform users about the status of ongoing processes such as loading, uploading, or processing.

Overview

Material Design offers two types of progress indicators: linear and circular. Linear progress indicators display progress as a horizontal bar. Circular progress indicators display progress as a circular stroke. Both can be determinate (showing specific progress) or indeterminate (showing ongoing activity without a known duration).

Live Preview - Linear Progress

Determinate (0%)

Indeterminate

Buffer (with background track)

Live Preview - Circular Progress

Small

Medium

Large

With label

Track Variants

Standard (4px height)

Thick (8px height)

Square corners

Segmented

Brand Properties

The following table shows all CRAFT Progress Indicator properties with their default values and brand-specific mappings.

Property	Type	Material Default	HoB Value	TAE Value
Active Color	Color picker	`#6750A4`	`#038012`	`#1A5129`
Track Color	Color picker	`#E7E0EC`	`#e5e7eb`	`#e5e7eb`
Linear Height	Input (px)	`4px`	`4px`	`4px`
Circular Size (Small)	Input (px)	`24px`	`32px`	`32px`
Circular Size (Medium)	Input (px)	`40px`	`40px`	`40px`
Circular Size (Large)	Input (px)	`48px`	`48px`	`48px`
Circular Stroke Width	Input (px)	`4px`	`4px`	`4px`
Border Radius	Input (px)	`2px`	`9999px`	`9999px`
Animation Duration	Input (ms)	`2000ms`	`1500ms`	`1500ms`
Animation Easing	Dropdown	`ease-in-out`	`ease-in-out`	`ease-in-out`
Label Font Size	Dropdown	`12px`	`12px`	`12px`
Label Font Weight	Dropdown	`500`	`500`	`500`

Use Cases

Uploading document.pdf

2.4 MB of 4.8 MB

50%

Order Progress

OrderedShippedOut for DeliveryDelivered

Content Loading

Loading content...

Accessibility

Use role="progressbar" for determinate progress
Include aria-valuenow, aria-valuemin, and aria-valuemax
Provide aria-label or aria-labelledby for context
For indeterminate, use aria-busy="true" on the loading region
Announce progress updates at meaningful intervals (e.g., every 20%)

Best Practices

Do

Use determinate when duration is known
Show percentage or status text when helpful
Place progress indicators near the content they relate to
Use consistent styling throughout the app

Don't

Use fake progress that doesn't reflect actual state
Show multiple progress indicators simultaneously
Make progress bars too thin to be visible
Leave users without feedback during long operations

Related Components

Communication Overview
Loading Indicator - For indeterminate states
Progress Bar Element