Open In App

Semantic-UI Progress Content

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 16 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads