Welcome Getting started Layout styles github-circle-black-transparent Source
Components
Badges
App bars
Bottom app bars Top app bars
Buttons
Common buttons FAB Icon buttons Segmented buttons
Cards Carousel Checkboxes Chips Date pickers Dialogs Forms Icons Lists Menus Navigation Progress indicators Pull to refresh Radios Search Selects
Sheets
Bottom sheets Side sheets
Sliders Snackbars Switches Tabs Text fields Time pickers Tooltips Utilities
home apps Buttons palette Two
Materially
github-circle-black-transparent

Progress indicators

Progress indicators inform users about the status of ongoing processes, such as loading an app or submitting a form
Material Design Guidelines: Progress indicators

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;
            
menu home apps Get started