Semantic-UI Loader Variations

Last Updated : 22 Apr, 2022

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create interactive interfaces. It can also be directly used via CDN like bootstrap.

Semantic-UI Loader Variations are used to represent the appearance of the loader element. There are four types of loader variations these are – Inline, Inline Center, Size, and Inverted.

Loader Variations:

Inline: It is used to display the loader element with content inline.
Inline Center: It is used to place the loader into the inline center.
Size: It is used to display the loaders in different sizes.
Inverted: It is used to display the loaders with their inverted colors.

Used Classes:

Loader Inline Variation Class:
- inline: This class is used to place the loader with content inline.
Loader Inline Center Variation Class:
- centered inline: This class is used to place the loader to the inline center.
Loader Size Variation Classes:
- mini: This class is used to display the loader of mini size.
- tiny: This class is used to display the loader of tiny size.
- small: This class is used to display the loader of small size.
- medium: This class is used to display the loader of medium size.
- large: This class is used to display the loader of large size.
- big: This class is used to display the loader of big size.
- huge: This class is used to display the loader of huge size.
- massive: This class is used to display the loader of massive size.
Loader Inverted Variation Classes:
- inverted: This class is used to display the loaders with their inverted colors.

Syntax:

<div class="ui active variation_class loader"></div>

Example 1: In this example, we will describe the loader Inline variation.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Loader Inline Variations
    </title>
 
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
 
    <style>
        .ui.segment {
            padding: 50px 0;
        }
    </style>
</head>
 
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
 
        <h3>Semantic-UI Loader Inline Variations</h3>
    </div>
 
    <div class="ui container">
        <div class="ui segment">
            <div class="ui active inline loader"></div>
        </div>
    </div>
</body>
 
</html>

Output:

Example 2: In this example, we will describe the Inline Center Variation.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Loader Inline Center Variations
    </title>
 
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
 
    <style>
        .ui.segment {
            padding: 50px 0;
        }
    </style>
</head>
 
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
 
        <h3>Semantic-UI Loader Inline Center Variations</h3>
    </div>
 
    <div class="ui container">
        <div class="ui segment">
            <div class="ui active inline centered loader"></div>
        </div>
    </div>
</body>
 
</html>

Output:

Example 3: In this example, we will describe the Loader Size Variation.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Loader Size Variations
    </title>
 
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
 
    <style>
        .ui.segment {
            padding: 60px 0;
        }
        .height {
            height: 250px;
        }
    </style>
</head>
 
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
 
        <h3>Semantic-UI Loader Size Variations</h3>
    </div>
 
    <div class="ui container">
        <div class="ui segment">
            <div class="ui active dimmer">
                <div class="ui mini text loader">
                    GeeksforGeeks Mini Size Loading...
                </div>
            </div>
        </div>
 
        <div class="ui segment">
            <div class="ui active dimmer">
                <div class="ui tiny text loader">
                    GeeksforGeeks Tiny Size Loading...
                </div>
            </div>
        </div>
 
        <div class="ui segment">
            <div class="ui active dimmer">
                <div class="ui small text loader">
                    GeeksforGeeks Small Size Loading...
                </div>
            </div>
        </div>
 
        <div class="ui segment">
            <div class="ui active dimmer">
                <div class="ui medium text loader">
                    GeeksforGeeks Medium Size Loading...
                </div>
            </div>
        </div>
 
        <div class="ui segment">
            <div class="ui active dimmer">
                <div class="ui large text loader">
                    GeeksforGeeks Large Size Loading...
                </div>
            </div>
        </div>
 
        <div class="ui segment">
            <div class="ui active dimmer">
                <div class="ui big text loader">
                    GeeksforGeeks Big Size Loading...
                </div>
            </div>
        </div>
 
        <div class="ui segment">
            <div class="ui active dimmer">
                <div class="ui huge text loader">
                    GeeksforGeeks Huge Size Loading...
                </div>
            </div>
        </div>
 
        <div class="ui segment">
            <div class="ui active dimmer">
                <div class="ui massive text loader">
                    GeeksforGeeks Massive Size Loading...
                </div>
            </div>
        </div>
 
        <div class="height"></div>
    </div>
</body>
 
</html>

Output:

Example 4: In this example, we will describe the Loader Inverted Variation.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Loader Inverted Variations
    </title>
 
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
 
    <style>
        .ui.segment {
            padding: 60px 0;
        }
    </style>
</head>
 
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
 
        <h3>Semantic-UI Loader Inverted Variations</h3>
    </div>
 
    <div class="ui container">
        <div class="ui segment">
            <div class="ui active inverted dimmer">
                <div class="ui text loader">
                    GeeksforGeeks Loading...
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>

Output:

Reference: https://semantic-ui.com/elements/loader.html

Suggest improvement

Semantic-UI Loader States

Semantic-UI | Placeholder

Share your thoughts in the comments

Semantic-UI Button

Semantic-UI Divider

Semantic-UI Header

Semantic-UI Image

Semantic-UI Input

Semantic-UI Label

Semantic-UI List