What is Semantic-UI Loader Size Variation?

In this article, we will learn Semantic-UI Loader Size Variation,This free Semantic-UI tutorial for complete beginners will help you learn Semantic-UI from scratch.

Semantic-UI Loader Size Variation - ❤️Semantic-UI Tutorials In 2024

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"> 
            w3wiki 
        </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"> 
                    w3wiki Mini Size Loading... 
                </div> 
            </div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active dimmer"> 
                <div class="ui tiny text loader"> 
                    w3wiki Tiny Size Loading... 
                </div> 
            </div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active dimmer"> 
                <div class="ui small text loader"> 
                    w3wiki Small Size Loading... 
                </div> 
            </div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active dimmer"> 
                <div class="ui medium text loader"> 
                    w3wiki Medium Size Loading... 
                </div> 
            </div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active dimmer"> 
                <div class="ui large text loader"> 
                    w3wiki Large Size Loading... 
                </div> 
            </div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active dimmer"> 
                <div class="ui big text loader"> 
                    w3wiki Big Size Loading... 
                </div> 
            </div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active dimmer"> 
                <div class="ui huge text loader"> 
                    w3wiki Huge Size Loading... 
                </div> 
            </div> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui active dimmer"> 
                <div class="ui massive text loader"> 
                    w3wiki 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"> 
            w3wiki 
        </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>

Output:

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