Skip to content
Related Articles

Related Articles

Semantic-UI Progress Content

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 16 Mar, 2022
View Discussion
Improve Article
Save Article

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. The best part about this framework is that it creates beautiful and responsive layouts as it contains pre-built semantic components.

Progress is an important component of our website as it displays the progress status of the action to the user. The progress components have various properties such as a progress bar with a text value or a progress bar with a label, etc. This can be achieved with the help of Semantic UI Progress Content.

Semantic UI Progress Content:

  • Bar: It is a bar that displays the progress of an activity visually.
  • Progress:  A bar can contain a text value that indicates the current progress.
  • Label: A bar can contain a label along with displaying its progress visually.

Syntax: The syntax is the same for the other two progress content classes and the only difference is the name of the class that will change.

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

Example 1: The below example will demonstrate the progress content bar classes in Semantic UI.

HTML




<!DOCTYPE html>
<html>
    
<head>
    <title>
        Semantic-UI Progress Bar Content
    </title>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
    
<body>
     
    <h2 class="header ui green"> GeeksforGeeks </h2>
    
    <h3>Progress Content</h3>
    
    <div class="ui progress" data-percent="40" id="bar">
         <div class="bar"></div>
    </div>   
        
    <script>
        $('#bar').progress();
    </script>
</body>
    
</html>


Output:

Example 2: The below example will demonstrate the progress content classes in Semantic UI.

HTML




<!DOCTYPE html>
<html>
    
<head>
    <title>
        Semantic-UI Progress Bar Content
    </title>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
    
<body>
     
    <h2 class="header ui green"> GeeksforGeeks </h2>
    
    <h3>Progress Content</h3>
    
    <div class="ui progress" data-percent="45" id="prog">
        <div class="bar">
            <div class="progress">
  
            </div>
        </div>
    </div>  
        
    <script>
        $('#prog').progress();
    </script>
</body>  
</html>


Output:

Example 3: The below example will demonstrate the progress content label classes in Semantic UI.

HTML




<!DOCTYPE html>
<html>
    
<head>
    <title>  Semantic-UI Progress Bar Content   </title>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
    
<body>
     
    <h2 class="header ui green"> GeeksforGeeks </h2>
    
    <h3>Progress Content</h3>
    
    <div class="ui progress" data-percent="50" id="bar">
        <div class="bar">
             <div class="progress"></div>
        </div>
        <div class="label">Uploading</div>
    </div>    
        
    <script>
        $('#bar').progress();
    </script>
</body>  
</html>


Output:

Reference link: https://semantic-ui.com/modules/progress.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!