Semantic-UI Progress Label Content

Last Updated : 22 Feb, 2022

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 the interfaces. It can also be directly used via CDN like bootstrap.

The progress bars indicate the progress of the work done out of the total work. It visually indicates the amount of work done using the bars. In this article, we will learn about the Progress Label Content. This can be used to display labels in the progress bar.

Semantic UI Progress Label Content Classes:

progress: This class is used to show a percentage inside the progress bar.

Syntax:

<div class="ui progress">
    <div class="bar">
        <div class="progress"></div>
    </div>
    <div class="label">.....</div>
</div>

Example 1: The following code demonstrates the progress bar with both the progress and label content.

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 Label content 
        </strong> 
    </center> 
  
    <div class="ui container"> 
        <div class="ui success progress" 
             data-value="10" 
             data-total="10" id='eg'> 
            <div class="bar"> 
                <div class="progress"></div> 
            </div> 
            <div class="label">Download Successful!</div> 
        </div> 
    </div> 
    <script> 
        $('#eg').progress(); 
    </script> 
</body> 
  
</html>

Output:

Semantic-UI Progress Label Content

Example 2: The following code demonstrates the progress bar with both the progress and label content.

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 Label content 
        </strong> 
    </center> 
  
    <div class="ui container"> 
        <div class="ui error progress"
             data-value="10" 
             data-total="50" 
             id='eg'> 
            <div class="bar"> 
                <div class="progress"></div> 
            </div> 
            <div class="label">Downloading</div> 
        </div> 
    </div> 
    <script> 
        $('#eg').progress(); 
    </script> 
</body> 
  
</html>