Loader

Import


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

Usage

The creation of an Overlay Loader in your code is done using the following HTML structure:


<div class="mc-overlay-loader" tabindex="-1" role="dialog">
  <div class="mc-loader mc-loader--l mc-loader--light">
    <span class="mc-loader__spinner">
      <svg
        class="mc-loader__icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 64 64"
      >
        <circle class="mc-loader__path" cx="50%" cy="50%" r="19" />
      </svg>
    </span>
  </div>
</div>

Variations

With loader text

You have the possibility, if you wish, to insert a complementary text to the loader, in order to give more information to the user.

Behaviour

On opening

During the loading time, in order to make the Overlay Loader visible, you just have to apply the class is-visible on the .mc-overlay-loader element.