Open In App

Semantic-UI Loader Inline Center Variation

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 Inline Center Variation is used to place the loader to the inline center.

Used Class:

  • centered inline: This class is used to place the loader to the inline center.

Syntax:

<div class="ui active centered inline loader"></div>

Example 1: In this example, we will describe the loader inline center variations.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Loader Inline Center Variations
    </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 Inline Center Variations</h3>
    </div>
  
    <div class="ui container">
        <div class="ui segment">
            <div class="ui active inline centered loader"></div>
        </div>
    </div>
</body>
  
</html>


Output:

Example 2: In this example, we will describe the loader inline center variations.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Loader Inline Center Variations
    </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 Inline Center Variations</h3>
    </div>
  
    <div class="ui container">
        <div class="ui segment">
            <div class="ui active inline center dimmer">
                <div class="ui text loader">
                    GeeksforGeeks Loading...
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

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



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