Skip to content
Related Articles

Related Articles

Semantic-UI Loader States

Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
Improve Article
Save Article

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.

The Semantic-UI Loader States are used to represent the different states of a loader element. There are three types of loader states that are – Indeterminate, Active, and Disabled.

Semantic-UI Loader States:

  • Indeterminate: It is used to display the loader that is unsure how long a time a task will take.
  • Active: It is used to display the loader that can be active or visible.
  • Disabled: It is used to represent the loader that can be disabled or hidden.

Syntax:

<div class="ui segment">
    <div class="ui active dimmer">
        <div class="ui Loader-States text loader">
            ...
        </div>
    </div>
</div>

Example 1: In this example, we will describe the indeterminate state of a loader element.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Loader Indeterminate States
    </title>
 
    <link rel="stylesheet" href=
 
    <style>
        .ui.active.dimmer {
            padding: 50px 0;
        }
    </style>
</head>
 
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
 
        <h3>Semantic-UI Loader Indeterminate States</h3>
 
        <div class="ui segment">
            <div class="ui active dimmer">
                <div class="ui indeterminate text loader">
                    GeeksforGeeks Loading...
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Loader States

Semantic-UI Loader States

Example 2: In this example, we will describe the active state of a loader element.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Loader active States
    </title>
 
    <link rel="stylesheet"
          href=
 
    <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 active States</h3>
 
        <div class="ui segment">
            <div class="ui active loader"></div>
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Loader States

Semantic-UI Loader States

Example 3: In this example, we will describe the disabled state of a loader element.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Loader disabled States
    </title>
 
    <link rel="stylesheet"
          href=
 
    <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 disabled States</h3>
 
        <div class="ui segment">
            <div class="ui disabled loader"></div>
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Loader States

Semantic-UI Loader States

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!