Semantic-UI Loader Inverted Variation

Last Updated : 09 Mar, 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 Variations are used to represent the appearance of the loader element. There are four types of loader variations these are – Inline, Inline Center, Size, and Inverted. The Semantic-UI Loader Inverted Variation is used to invert the color of the loader element.

Loader Inverted Variation Class:

inverted: This class is used to display the loaders with their inverted colors.

Syntax:

<div class="ui inverted segment">
      <div class="ui active inverted loader"></div>
          ...
      </div>
      ...
</div>

Example 1: In this example, we will describe the loader inverted variation.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Loader Inverted Variation 
    </title> 
  
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
  
    <style> 
        .ui.segment { 
            padding: 60px 0; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="ui container center aligned"> 
        <h2 style="color:green"> 
            GeeksforGeeks 
        </h2> 
  
        <h3>Semantic-UI Loader Inverted Variation</h3> 
    </div> 
  
    <div class="ui container"> 
        <div class="ui inverted segment"> 
            <div class="ui active inverted loader"></div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will describe the loader inverted variation.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Loader Inverted Variation 
    </title> 
  
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
  
    <style> 
        .ui.inverted.segment { 
            padding: 60px 0; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="ui container center aligned"> 
        <h2 style="color:green"> 
            GeeksforGeeks 
        </h2> 
  
        <h3>Semantic-UI Loader Inverted Variation</h3> 
    </div> 
  
    <div class="ui container"> 
        <div class="ui inverted segment"> 
            <div class="ui active inverted dimmer"> 
                <div class="ui text loader"> 
                    GeeksforGeeks Loading... 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>