Spinner

The spinner is a CSS class that provides a loading animation. So that the spinner can be used in different situations, it is possible to set the size and the theme and the spinner is not a component.

Usage

<div class="monster-spinner"></div>

Size

You must set the width and height of the spinner.

<div class="monster-spinner" style="width: 100px; height: 100px;"></div>

Themes

Therefor the spinner can be used in different themes.

<div style="display: flex; justify-content: space-around; align-items: center;">
    <div class="monster-spinner monster-theme-primary-1" style="width: 100px; height: 100px;"></div>
    <div class="monster-spinner monster-theme-primary-2" style="width: 100px; height: 100px;"></div>
    <div class="monster-spinner monster-theme-primary-3" style="width: 100px; height: 100px;"></div>
    <div class="monster-spinner monster-theme-primary-4" style="width: 100px; height: 100px;"></div>
</div>

This will result in the following output:

The themes can be used in combination with the monster-theme class.

<div class="monster-theme-secondary-4" style="display: flex; justify-content: space-around; align-items: center;">
    <div class="monster-spinner monster-theme-secondary-1" style="width: 100px; height: 100px;"></div>
    <div class="monster-spinner monster-theme-secondary-2" style="width: 100px; height: 100px;"></div>
    <div class="monster-spinner monster-theme-secondary-3" style="width: 100px; height: 100px;"></div>
    <div class="monster-spinner monster-theme-secondary-4" style="width: 100px; height: 100px;"></div>
</div>