Loading

The loader component is accessible via the .ms-loading class. They can be of different sizes and different colors.

Basic usage

Live Editor

<div class="ms-loading"></div>

<div class="ms-loading"></div>

Result

colors

The color of the loader can be changed.

Live Editor

<div> <div class="ms-loading ms-primary"></div> <div class="ms-loading ms-secondary"></div> <div class="ms-loading ms-action"></div> <div class="ms-loading ms-action2"></div> </div>

<div>
    <div class="ms-loading ms-primary"></div>
    <div class="ms-loading ms-secondary"></div>
    <div class="ms-loading ms-action"></div>
    <div class="ms-loading ms-action2"></div>
</div>

Result

Size

The size can also be changed with the .ms-small, .ms-medium and .ms-large classes

Live Editor

<div> <div class="ms-loading ms-small"></div> <div class="ms-loading"></div> <div class="ms-loading ms-medium"></div> <div class="ms-loading ms-large"></div> </div>

<div>
    <div class="ms-loading ms-small"></div>
    <div class="ms-loading"></div>
    <div class="ms-loading ms-medium"></div>
    <div class="ms-loading ms-large"></div>
</div>

Result