Progress types
There are two types of progress indicators: Linear and circular
<mc-progress-linear value="0.4"></mc-progress-linear>
<mc-progress-circular value="0.4" style="margin: 0 auto;"></mc-progress-circular>
Linear
'max' attribute default = 1
Determinate
Indeterminate
<!-- Determinate: 'max' attribute default = 1 -->
<mc-progress-linear value="0.3" max="1"></mc-progress-linear>
<!-- Indeterminate -->
<mc-progress-linear indeterminate></mc-progress-linear>
Circular
'max' attribute default = 1
Determinate
Indeterminate
<!-- Determinate: 'max' attribute default = 1 -->
<mc-progress-circular value="0.3" max="1"></mc-progress-circular>
<!-- Indeterminate -->
<mc-progress-circular indeterminate></mc-progress-circular>
Style
CSS variables that allow you override default values
/* Optional variables for overriding */
--mc-progress-circular-color: var(--mc-primary);
/* percentage without (%) symbol so calc can work. 8.3333 is roughly equal to 4px */
--mc-progress-circular-width: 8.3333;
--mc-progress-linear-color: var(--mc-primary);
--mc-progress-linear-height: 4px;