Waiting Indicator (Loader)

The Waiting Indicator component provides a variety of animated loaders to visually indicate loading or processing states in your application. It includes spinners, bars, growing dots, liquid effects, and more, all customizable via SCSS variables and utility classes.

Description #

The Waiting Indicator (Loader) component offers multiple visual styles for representing loading states. Each loader type is implemented as a CSS class and can be customized for size and color. Main features include:

• Multiple Loader Types: Spinner, Grow, Bars, Multi, Liquid, and Fade.

• Customizable Size & Color: Easily adjust size and color using utility classes or SCSS variables.

• Pure CSS Animations: All loaders are implemented with CSS/SCSS, requiring no JavaScript.

Examples and Classes #

Basic Example

            

                

                

                

                

                

                

                

            
            

                
                
HTML
                
            
            <div class="loader-spinner-border bw-4 border-primary-color" style="--loader-spinner-border-size:30px;"></div>
<div class="loader-grow bg-primary-color" style="--loader-grow-size:50px;"></div>
<div class="loader-spinner-fade" style="--loader-spinner-fade-size:50px;"></div>
<div class="loader-bars" style="--loader-bars-size:50px;"></div>
<div class="loader-multi" style="--loader-multi-size:50px;"></div>
<div class="loader-spinner" style="--loader-spinner-size:50px;"></div>
<div class="loader-liquid" style="--loader-liquid-size:50px;"></div>

Available Classes

Class	Description
.loader-spinner-border	Circular border spinner loader.
.loader-grow	Animated growing dot loader.
.loader-spinner-fade	Fading spinner loader with radial/conic gradient.
.loader-bars	Animated bars loader.
.loader-multi	Multi-ring rotating loader.
.loader-spinner	Classic spinner loader with border animation.
.loader-liquid	Liquid morphing loader with animated border-radius.

Layout Variations

The Waiting Indicator component supports different loader types and can be customized for size and color:

• Spinner Border: Circular border spinner animation
• Grow: Expanding and fading dot
• Bars: Animated vertical bars
• Multi: Multi-ring rotating loader
• Liquid: Morphing liquid effect
• Fade: Fading spinner with gradient
• Classic Spinner: Standard rotating spinner

File Locations #

File	Path	Description
index.html	miz/themes/mizoon/components/waiting-indicator/index.html	Example implementation and documentation
_index.scss	miz/themes/mizoon/components/waiting-indicator/_index.scss	SCSS styles and variables
script.js	miz/themes/mizoon/components/waiting-indicator/script.js	(Empty) No JavaScript required for this component

SCSS Variables #

            

                
                
SCSS
                
            
            $loader-spinner-fade-bg-color: "primary";
$loader-bars-bg-color: "primary";
$loader-multi-border-color: "primary";
$loader-spinner-border-top-color: "primary";
$loader-spinner-border-color: "on-primary";
$loader-liquid-bg-color: "primary";

CSS Variables

Variable	Description	Default/Example
--loader-spinner-border-size	Size of the spinner-border loader	30px
--loader-grow-size	Size of the grow loader	50px
--loader-spinner-fade-size	Size of the spinner-fade loader	50px
--loader-bars-size	Size of the bars loader	50px
--loader-multi-size	Size of the multi loader	50px
--loader-spinner-size	Size of the classic spinner loader	50px
--loader-liquid-size	Size of the liquid loader	50px

JavaScript Implementation #

Class Structure

Method/Property	Type	Description
(none)	-	No JavaScript is required for this component. All animations and behaviors are handled by CSS.

Implementation Example

            

                
                
JavaScript
                
            
            // No JavaScript required for Waiting Indicator component