Open In App

Semantic-UI Loader Indeterminate State

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 Loader Indeterminate State is used to display the loader that is unsure how long time a task will take. 

Used Class:

  • indeterminate: This class is used to display the loader for indeterminate states.

Syntax:

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

Example 1: This example describes the indeterminate state of a task.

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:

Example 2: This example describes the inverted indeterminate state of a task.

HTML




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


Output:

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



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