Semantic-UI Progress Attached Variation

Last Updated : 07 Mar, 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.

A Semantic UI Progress allows a user to show the progression of a task. Semantic UI Progress offers us 2 Types, 3 Content, 5 States, and 5 Variations. In this article, we will learn about the Semantic UI Progress attached variation.

Semantic UI Progress Attached Variation is used for creating a progress bar that can show the progress of an element in the top or bottom attachment.

Semantic UI Progress Attached Variation Classes:

top attached: This class is used for creating a progress bar that can show the progress of an element in the top part.
bottom attached: This class is used for creating a progress bar that can show the progress of an element in the bottom part.

Syntax:

<div class="ui segment">
     <div class="ui Attached-Variation-Class progress">
          <div class="bar"></div>
     </div>
   ....     
</div>

Example 1: The below example illustrates the Semantic UI top and bottom progress attached variation.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 class="ui green header">GeeksforGeeks</h1> 
        <strong>Semantic-UI Progress Attached Variation </strong> 
    </center> 
    <div class="ui segment"> 
        <div class="ui top attached progress"> 
            <div class="bar"></div> 
        </div> 
        <p>GFG gfg</p> 
        <div class="ui bottom attached progress"> 
            <div class="bar"></div> 
        </div> 
    </div> 
    <div class="ui button">Increase</div> 
    <script> 
        $('.ui.button').on('click', function () { 
            $('.progress').progress('increment'); 
        }); 
    </script> 
</body> 
  
</html>

Output:

Semantic-UI Progress Attached Variation

Example 2: The below example illustrates the Semantic UI bottom progress attached variation.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h1 class="ui green header">GeeksforGeeks</h1> 
        <strong>Semantic-UI Progress Attached Variation</strong> 
        <div class="ui card"> 
            <div class="image"> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
            </div> 
            <div class="content"> 
                <a class="header">GeeksforGeeks Logo</a> 
            </div> 
            <div class="ui bottom attached progress"> 
                <div class="bar"></div> 
            </div> 
        </div> 
        <div class="ui button">Increase</div> 
        <script> 
            $('.ui.button').on('click', function () { 
                $('.progress').progress('increment'); 
            }); 
        </script> 
    </center> 
</body> 
</html>