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.


  • 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


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


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