Component · Feedback

Progress

a linear bar for a known fraction (determinate) or an ongoing operation (indeterminate).

Example

Playground

value
indeterminate 
 
 
 
Where available
 
 
 ✓ React 
 ✓ Angular 
 ✓ Web Components 
 ✓ Blazor 
 ✓ Tokens 
 
 
Using it
 
the same component, named idiomatically per target. one CSS contract underneath, so they render identically.
 
 
 
TargetReferencePackage
  
 React <Progress> @design-foundry/lucent-react 
 Angular <lucent-progress> @design-foundry/lucent 
 Web Components <lucent-progress> @design-foundry/lucent-wc 
 Blazor <LucentProgress> DesignFoundry.Lucent 
  
 
  
API
 
 
 
PropTypeDefaultDescription
  
 value number 0 current value (determinate). 
 max number 100 value denominator. 
 indeterminate boolean false unknown duration — looping bar. 
 label string — accessible name.