Loading

Types

Generally, FlatifyCSS has two types of loading: dots and spinners.
The loading component is useful when you want a delay between fetching data and showing it. It offers classes to fit various situations, you can have loadings with different colors and sizes or customize it yourself.

Dots

Create an element with the .loading class, it is a three-dot loader.
Dots loading provide three dots with order for being shown, note that you can change the inital scale of dots value, so instead of zome out we can have zoom in! We will talk about customizing later.

index.html

<span class="loading"></span>

Stop the animation!

To pause the loading use .pause-animation also by adding the .stop-animation class, the loading animation will be stopped.

Spinner

Spinners are another kind of loadings, add .spinner class to an element to have a spinner loading. Spinners also support animation state changer classes like .pause-animation and .stop-animation.

index.html

<span class="spinner"></span> <span class="spinner stop-animation"></span>

Overlay loading

This is a situation that happens for any web developer, let's dive in.
Imagine you use the loading component inside a button and expect when data is fetching, having a loading inside that button instead of the button text. However, if you use the loading component inside the button directly, the layout undoubtedly will shift. Check the example below to understand this case:

index.html

<button class="button overlay-layer size-lg style-dark">
  Toggle me!
  <span class="loading"></span>
</button>

In the first example on click, there is just a loading component inside the button, so button width and height change based on it, which means layout shifts and it is the bad user experience we were talking about.
Otherwise second example uses overlay layer helper class, adds .overlay-layer class to the button and appends <span class="loading"></span> inside button next to the button text.

How it works

Technically overlay layer creates an overlay element with CSS ::before that comes over and hides button content and just shows the loading element, it will prevent unwanted layout shifts and changes will be done smoothly!

Sizes

To change the loading component size use size setter classes. These classes just set a font-size property so it is possible to change it yourself by writing custom CSS.

index.html

<span class="loading size-xs"></span>
<span class="spinner size-xs"></span>

<span class="loading size-md"></span>
<span class="spinner size-md"></span>

<span class="loading size-lg"></span>
<span class="spinner size-lg"></span>

<span class="loading size-3x"></span>
<span class="spinner size-3x"></span>

Colors

There are helper classes for styling loading component, first read about color setter classes.

Change loading color

By default loading component use element or its parent text color, so instead of using .style-red use .color-red to change the loading color.

index.html

<span class="loading color-red"></span>
<span class="spinner color-red"></span>
<span class="spinner style-red"></span>

<span class="loading color-orange"></span>
<span class="spinner color-orange"></span>
<span class="spinner style-orange"></span>

<span class="loading color-green"></span>
<span class="spinner color-green"></span>
<span class="spinner style-green"></span>

<span class="loading color-blue"></span>
<span class="spinner color-blue"></span>
<span class="spinner style-blue"></span>

Customization

It is possible to change loading component (both dots and spinner) color, duration and animation.
Here is a list of loading component CSS variables to customize it.

--flatify__loading-color
--flatify__loading-dot-width
--flatify__loading-dot-height
--flatify__loading-dot-animation-start-scale
--flatify__loading-dot-animation-duration
--flatify__loading-spinner-animation-duration

index.html

<!-- Custom Dots loadings -->
<span class="loading my-dots-loading-1"></span>
<span class="loading my-dots-loading-2"></span>

<!-- Custom spinner loadings -->
<span class="spinner my-spinner-loading-1"></span>
<span class="spinner my-spinner-loading-2"></span>

style.css

/*  Custom Dots loadings */
.my-dots-loading-1 {
  --flatify__loading-color: #48cfad;
  --flatify__loading-dot-width: 1em;
  --flatify__loading-dot-height: 0.5em;
  --flatify__loading-dot-animation-start-scale: 0;
  --flatify__loading-dot-animation-duration: 0.75s;
}

.my-dots-loading-2 {
  --flatify__loading-color: #fc6e51;
  --flatify__loading-dot-width: 0.5em;
  --flatify__loading-dot-height: 2em;
  --flatify__loading-dot-animation-start-scale: 2;
  --flatify__loading-dot-animation-duration: 2s;
}

/* Custom spinner loadings */
.my-spinner-loading-1 {
  --flatify__loading-color: #6a50a7;
  --flatify__loading-spinner-animation-duration: 2s;
}

.my-spinner-loading-2 {
  --flatify__loading-color: #aa8e69;
  --flatify__loading-spinner-animation-duration: 0.35s;
}