@import 'settings-tools/all-settings';
@include import-font-families();
@import 'components/c.loader';


The creation of a Loader component in your code is done using the following HTML structure:

<div class="mc-loader">
viewBox="0 0 32 32"
<circle class="mc-loader__path" cx="50%" cy="50%" r="9" />


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

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:

SizeviewBox attributer attribute
sviewBox="0 0 24 24"r="6"
mviewBox="0 0 32 32"r="9"
lviewBox="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

Dark variation

Light variation