Skip to content
Related Articles

Related Articles

Semantic-UI Loader Types

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
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.

Semantic-UI Text Loader Type is used to create a loader for a particular task.

Used Class:

  • ui loader: This class is used to create a loader element.

Example 1: In this example, we will create a simple loader element.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Semantic-UI Loader Type
    </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 Type</h3>
 
        <div class="ui segment">
            <div class="ui active dimmer">
                <div class="ui loader"></div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Example 2: In this example, we will create a simple loader element.

HTML




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


Output:

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!