Progress

The Progress component provides visual feedback about an operation's status through both linear bar and circular spinner variants.

Basic usage

The Progress component offers two display modes through different selectors:

• <lmn-progress-bar>: Linear progress bar
• <lmn-progress-spinner>: Circular progress spinner

Component anatomy

Mode

Control progress display using the value Input:

• Determinate: Fixed value between 0-100
• Indeterminate: Continuous animation (when no value set)

Size

Adjust dimensions using the size Input with three options:

• SM: Compact (2px stroke)
• MD: Default (4px stroke)
• LG: Large (8px bar/4px spinner stroke)

Theme

Configure appearance using the theme Input:

• Neutral Primary (default)
• Neutral Secondary
• Brand Core
• Brand Alt
• Brand CTA
• Danger

Each theme includes background and progress track colors.

Progress Bar Features

Linear progress includes:

• Smooth value transitions
• Buffer indicator
• Secondary progress animation
• RTL support

Progress Spinner Features

Circular progress includes:

• Smooth rotation animation
• Multi-layer spinning effect
• RTL mirroring
• Precise angle calculations

Negative Theme

Enable dark theme using the negative Input, affecting:

• Track colors
• Progress colors
• Background opacity
• Animation contrast

Accessibility

ARIA Implementation

Comprehensive ARIA support:

• progressbar role
• aria-valuemin/max (0-100)
• aria-valuenow for current progress
• State announcements
• RTL adaptations

Animation Control

Respect user preferences:

• Reduced motion support
• Animation timing
• Color contrast
• Focus indication

Screen Reader Support

Clear progress communication:

• Value announcements
• State changes
• Mode transitions
• Completion status

Best Practices for Developers

1. Mode Selection DEMO HERE

2. Theme Usage DEMO HERE

3. Animation Guidelines DEMO HERE