Semantic-UI Button States Loading

Last Updated : 10 Feb, 2022

Semantic UI offers many components for users to design their interface. Semantic UI Button States offers us so many states in buttons like active, disabled, and loading. In this article, we will discuss the loading state. The Semantic UI Button States Loading state variant is used to create a loading button.

Semantic-UI Button States Loading state class:

loading: This class is used to create a loading button.

Syntax:

<button class="ui loading button">...</button>

The below example illustrates the Semantic UI Button States Loading state:

Example: In this example, we will create 2 sets of buttons that will be in loading states. One set will be normal buttons and the other pair will be a basic button. One can apply the loading states variant on any type of button.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
    <style> 
        .container { 
            margin-left: 5px; 
            margin-right: 5px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green"> 
          GeeksforGeeks 
        </h1> 
        <strong> 
          Semantic-UI Button States Loading  
        </strong> 
    </center> 
    <br><br> 
    <div class="container"> 
        <strong> 
          Loading State Normal Buttons: 
        </strong> 
        <button class="ui red loading button">GFG 
        </button> 
        <button class="ui orange loading button">GFG 
        </button> 
        <button class="ui yellow loading button">GFG 
        </button> 
        <button class="ui olive loading button">GFG 
        </button> 
        <button class="ui green loading button">GFG 
        </button> 
        <button class="ui teal loading button">GFG 
        </button> 
        <br><br> 
        <strong>Loading State Basic Buttons:</strong> 
        <button class="ui blue basic loading button">GFG 
        </button> 
        <button class="ui violet basic loading button">GFG 
        </button> 
        <button class="ui purple basic loading button">GFG 
        </button> 
        <button class="ui pink basic loading button">GFG 
        </button> 
        <button class="ui brown basic loading button">GFG 
        </button> 
        <button class="ui grey basic loading button">GFG 
        </button> 
    </div> 
</body> 
  
</html>