Semantic-UI Tab Loading State

Last Updated : 12 Feb, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI offers a tab component for users to bundle up different categories of content, showing only one category of content at a time. The other options are shown in boxes aligned in one row. Users can click any one of the options to view that option. There are different states of Semantic UI Tabs. One of them is the loading state.

The data to be shown in the content may be in a loading state and the user wants to ensure if all content is loaded or not. In the meantime you want the content to be shown in the loading state. This is one of the cases when you can make use of the loading state of the tab. A loader will appear showing that the content loading is in progress.

Semantic UI Tab Loading State class:

loading: This class is used to set the state of the tab as the loading state.

Syntax:

<div class="ui ... loading tab segment">
 <p>....</p>
   ....
</div>

Example: This example demonstrates the Semantic UI Loading state using the loading class. When the page is loaded first “Tab” has the loading state. When the user clicks on “Tab2” it gets the active state and the loading state is removed from “Tab”. Now as per the normal functioning of tabs if the user clicks on “Tab” again, it gets the active state and the respective content gets loaded.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
</head> 
  
<body> 
    <br/><br/> 
    <div class="ui container"> 
        <h2 class="header ui green"> 
            GeeksforGeeks 
        </h2>  
  
        <strong>Semantic UI Tab Loading State</strong> 
  
        <div class="ui top attached tabular menu"> 
            <div class="active item" 
                  data-tab="first">Tab</div> 
            <div class="item" 
                  data-tab="second">Tab 2</div> 
        </div> 
  
        <div class="ui bottom attached loading tab segment" 
             data-tab="first"> 
            <p>Loading of content is complete</p> 
  
            <br> 
            <p>  
                As the placement season is back, 
                GeeksforGeeks is here to help you 
                crack the interview. We have selected 
                some most commonly asked and MUST DO 
                practice problems to crack Product-based 
                Company Interviews. You can also take  
                part in our mock placement contests  
                which will help you learn different  
                topics and practice at the same time,  
                simulating the feeling of a real placement 
                test environment. 
             </p> 
  
        </div> 
        <div class="ui bottom attached tab segment"
             data-tab="second"> 
            <p>Content already loaded:</p> 
  
            <br> 
            <p>  
                As the placement season is back, 
                GeeksforGeeks is here to help you 
                crack the interview. We have selected 
                some most commonly asked and MUST DO 
                practice problems to crack Product-based 
                Company Interviews. You can also take  
                part in our mock placement contests  
                which will help you learn different  
                topics and practice at the same time,  
                simulating the feeling of a real  
                placement test environment. 
             </p> 
        </div> 
    </div> 
  
    <script> 
        $('.menu .item').tab(); 
    </script> 
</body> 
  
</html>