Open In App

Semantic-UI Text Loader Type

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 element with text content for a task. 

Used Class:

  • text loader: This class is used to create a loader with text content.

Syntax:

<div class="ui segment">
    <div class="ui active dimmer">
        <div class="ui text loader"> Text... </div>
    </div>
</div>

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

HTML




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


Output:

Example 2: In this example, we will create a simple loader with inverted variation elements and text content.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Text 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 Text Loader Type</h3>
  
        <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#text-loader



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