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
Specifications
- Progress track uses palette.grey.v_200
- 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
| — |