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;