Semantic-UI Loader Disabled State

Last Updated : 20 Feb, 2022

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 Disabled State is used to represent the loader that can be disabled or hidden.

Used Class:

disabled: This class is used to represent the disabled state of the loader widget.

Syntax:

<div class="ui segment">
    <div class="ui disabled loader"></div>
</div>

Example 1: This example describes the Loader Disabled State.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Loader disabled States 
    </title> 
  
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
  
    <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:

Example 2: This example describes the Loader Disabled State.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Loader disabled States 
    </title> 
  
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
  
    <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 dimmer"> 
                <div class="ui text loader"> 
                    GeeksforGeeks Loading... 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>