Open In App

Semantic-UI Loader Types

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 22 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads