Progress Indicator

Demo

Circular Size

Code

<mdc-progress-indicator variant="circular" circular-size="extra-small" value="0.6"></mdc-progress-indicator>
<mdc-progress-indicator variant="circular" circular-size="small" value="0.6"></mdc-progress-indicator>
<mdc-progress-indicator variant="circular" circular-size="medium" value="0.6"></mdc-progress-indicator>
<mdc-progress-indicator variant="circular" circular-size="large" value="0.6"></mdc-progress-indicator>

Indeterminate

Code

<mdc-progress-indicator variant="linear" indeterminate></mdc-progress-indicator>
<mdc-progress-indicator variant="circular" indeterminate></mdc-progress-indicator>

Value

Code

<mdc-progress-indicator variant="linear" value="0"></mdc-progress-indicator>
<mdc-progress-indicator variant="linear" value="0.25"></mdc-progress-indicator>
<mdc-progress-indicator variant="linear" value="0.5"></mdc-progress-indicator>
<mdc-progress-indicator variant="linear" value="0.75"></mdc-progress-indicator>
<mdc-progress-indicator variant="linear" value="1"></mdc-progress-indicator>

<mdc-progress-indicator variant="circular" value="0"></mdc-progress-indicator>
<mdc-progress-indicator variant="circular" value="0.25"></mdc-progress-indicator>
<mdc-progress-indicator variant="circular" value="0.5"></mdc-progress-indicator>
<mdc-progress-indicator variant="circular" value="0.75"></mdc-progress-indicator>
<mdc-progress-indicator variant="circular" value="1"></mdc-progress-indicator>

Variant

Code

<mdc-progress-indicator variant="linear" value="0.5"></mdc-progress-indicator>
<mdc-progress-indicator variant="circular" value="0.5"></mdc-progress-indicator>