Semantic-UI Loader Size Variation

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 Size Variation is used to display the loaders in different sizes.

Used Classes:

mini: This class is used to display the loader of mini size.
tiny: This class is used to display the loader of tiny size.
small: This class is used to display the loader of small size.
medium: This class is used to display the loader of medium size.
large: This class is used to display the loader of large size.
big: This class is used to display the loader of big size.
huge: This class is used to display the loader of huge size.
massive: This class is used to display the loader of massive size.

Syntax:

div class="ui segment">
  <div class="ui active dimmer">
    <div class="ui loader_size text loader">Loading</div>
  </div>
</div>

Example 1: In this example, we will describe the uses of loader size variations.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Loader Size Variations 
    </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; 
        } 
        .height { 
            height: 250px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="ui container center aligned"> 
        <h2 style="color:green"> 
            GeeksforGeeks 
        </h2> 
  
        <h3>Semantic-UI Loader Size Variations</h3> 
    </div> 
  
    <div class="ui container"> 
        <div class="ui segment"> 
            <div class="ui active dimmer"> 
                <div class="ui mini text loader"> 
                    GeeksforGeeks Mini Size Loading... 
                </div> 
            </div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active dimmer"> 
                <div class="ui tiny text loader"> 
                    GeeksforGeeks Tiny Size Loading... 
                </div> 
            </div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active dimmer"> 
                <div class="ui small text loader"> 
                    GeeksforGeeks Small Size Loading... 
                </div> 
            </div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active dimmer"> 
                <div class="ui medium text loader"> 
                    GeeksforGeeks Medium Size Loading... 
                </div> 
            </div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active dimmer"> 
                <div class="ui large text loader"> 
                    GeeksforGeeks Large Size Loading... 
                </div> 
            </div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active dimmer"> 
                <div class="ui big text loader"> 
                    GeeksforGeeks Big Size Loading... 
                </div> 
            </div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active dimmer"> 
                <div class="ui huge text loader"> 
                    GeeksforGeeks Huge Size Loading... 
                </div> 
            </div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active dimmer"> 
                <div class="ui massive text loader"> 
                    GeeksforGeeks Massive Size Loading... 
                </div> 
            </div> 
        </div> 
  
        <div class="height"></div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will describe the uses of loader size variations.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Loader Size Variations 
    </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; 
        } 
  
        .height { 
            height: 250px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="ui container center aligned"> 
        <h2 style="color:green"> 
            GeeksforGeeks 
        </h2> 
  
        <h3>Semantic-UI Loader Size Variations</h3> 
    </div> 
  
    <div class="ui container"> 
        <div class="ui segment"> 
            <div class="ui active mini loader"></div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active tiny loader"></div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active small loader"></div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active medium loader"></div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active large loader"></div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active big loader"></div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active huge loader"></div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active massive loader"></div> 
        </div> 
  
        <div class="height"></div> 
    </div> 
</body> 
  
</html>