Loader
Import
@import 'settings-tools/all-settings';@include import-font-families();@import 'components/c.loader';
Usage
The creation of a Loader component in your code is done using the following HTML structure:
<div class="mc-loader"> <svg class="mc-loader__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" > <circle class="mc-loader__path" cx="50%" cy="50%" r="9" /> </svg></div>
Variations
Available sizes
You can use any of the three sizes available using the following modifiers:
- small :
mc-loader--s - medium : this is the default style so you don't need to add a modifier class
- large :
mc-loader--l
Warning
Depending on the size you use, please take care to update the attributes of the SVG element in the loader. See below for more information.
Update svg attributes
Depending on the size, the attributes differ.
There are two attributes that you should pay particular attention to: viewBox & r.
The values of these attributes change according to the size used, as follows:
| Size | viewBox attribute | r attribute |
|---|---|---|
| s | viewBox="0 0 24 24" | r="6" |
| m | viewBox="0 0 32 32" | r="9" |
| l | viewBox="0 0 64 64" | r="19" |
Available themes
Depending on your context, you can use one of these three available theme colours by using the following modifiers:
- dark :
mc-loader--dark - light :
mc-loader--light - primary : this is the default color theme so you don't need to add a modifier class