Overview

Linear loaders illustrate progress by moving an indicator along a horizontal track. There are two types of linear loaders:

  • Determinate: these loaders show a visual indicator of detectable and measurable progress percentage
  • Indeterminate: these loaders show an ongoing process with an unspecified or undetectable percentage completion
See the loaders page for more information.

Specifications

  • Progress track uses palette.grey.v_100
  • Progress indicator uses palette.grey.v_800
  • Progress track height is 4px
  • Include a 2px corner radius
  • Remove the corner radius when appended to other components, such as appbars or data tables

Placement

  • Can be attached to existing components such as appbars or table rows
  • As a progress bar, should be near task-related metadata

Props

Name Description Type Default Required
type
One of 'determinate' or 'indeterminate'. Determinate loaders represent a known completion percentage, while indeterminate loaders simply show that activity is currently happening.
string 'indeterminate'
progress
For determinate loaders, value between 0 and 100 representing percentage completion
number 0
delay
Whether there should be a delay before the loader displays. Useful if the action often takes less than a second or two.
boolean false