Open In App

Semantic-UI Segment Loading State

Improve
Improve
Like Article
Like
Save
Share
Report

The Semantic UI is an open-source framework that provides a segment or portion on a webpage that is used to create a group of related content. It is very similar to bootstrap usage and has different elements to make your website more amazing using jQuery and CSS for interfaces. For the styling of elements, it uses classes.

A Segment is used to create a grouping of related content. Semantic UI provides classes for styling the segment element. There are two states of the segment in Semantic UI, i.e. disabled and loading. In this article, we will learn about the loading state of the segment in the Semantic UI.

In the Loading state, a segment shows that its content is being loaded. An animated loader is shown on top of the segment to denote this. Semantic UI uses the loading class to convert a basic segment into a loading segment. We use the .ui and the .segment classes of Semantic UI for creating a normal segment.

Semantic UI Segment Loading State Class:

  • loading: The class converts a basic segment in Semantic UI to a loading state segment.

Syntax:

<div class="ui loading segment"> </div>

Example 1: This example demonstrates the loading state of the basic segment in Semantic UI.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
          href=
   <script src=
    </script>
    <script src=
    </script>
</head>
  
<body style="padding: 30px;">
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <strong>Semantic UI Loading Segment</strong>
        <br /><br />
    </center>
    <div class="ui loading segment">
        <center>
            <h3>Welcome to geeksforgeeks.</h3>
            <p>Learn anything you want</p>
  
            <p>
                Get tutorial of anything
                related to computer science.
            </p>
            <p>Courses on programming</p>
            <p>Solve programming problems.</p>
            <p>Help other by writing articles.</p>
  
        </center>
    </div>
</body>
  
</html>


Output:

Semantic-UI Segment Loading State

Semantic-UI Segment Loading State

Example 2: This example demonstrates the loading state of the inverted segment in Semantic UI.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body style="padding: 30px;">
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <strong>Semantic UI Inverted Loading Segment</strong>
        <br /><br />
    </center>
    <div class="ui loading inverted segment" 
         style="height: 300px;">
    </div>
</body>
  
</html>


Output:

Semantic-UI Segment Loading State

Semantic-UI Segment Loading State

Reference: https://semantic-ui.com/elements/segment.html#loading



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