Progress indicators

Progress indicators inform users about the status of ongoing processes, such as loading an app or submitting a form

Material Design Guidelines: Progress indicators

Example

There are two types of progress indicators: Linear and circular

Linear

'max' attribute default = 1

Determinate

Indeterminate

        
  <!-- Determinate: 'max' attribute default = 1 -->
  <wfc-progress-linear value="0.3" max="1"></wfc-progress-linear>
  
  <!-- Indeterminate -->
  <wfc-progress-linear indeterminate></wfc-progress-linear>

Circular determinate

'max' attribute default = 1

Determinate

Indeterminate

        
  <!-- Determinate: 'max' attribute default = 1 -->
  <wfc-progress-circular value="0.3" max="1"></wfc-progress-circular>
  
  <!-- Indeterminate -->
  <wfc-progress-circular indeterminate></wfc-progress-circular>