Progress

a linear bar for a known fraction, or a looping bar for work of unknown length.

Example

<div class="lucent-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40">
  <span class="lucent-progress__bar" style="width:40%">
  </span>
</div>
<div class="lucent-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80">
  <span class="lucent-progress__bar" style="width:80%">
  </span>
</div>
<div class="lucent-progress lucent-progress--indeterminate" role="progressbar">
  <span class="lucent-progress__bar">
  </span>
</div>

Playground

value
indeterminate 
 
 
 
Using it
 
 
  
 Angular  lucent-progress 
import { LucentProgress } from '@design-foundry/lucent-angular';
 		 
 
 Stylesheet  .lucent-progress 
@design-foundry/lucent-styles/core.css
 		 
  
 
  
API
 
 
 
NameKindTypeDefaultDescription
  
 value input number 0 current value. 
 max input number 100 value denominator. 
 indeterminate input boolean false unknown duration; loops. 
 label input string '' accessible name. 
  
 
  
Theming
 
 
 
Color (2)
  
 
Size & spacing (1)
  
 
Border & radius (1)