Mozaic

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>

Viewport: px

not found

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.

Viewport: px

not found

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.