Skip to content
Related Articles

Related Articles

Semantic-UI Progress Types

View Discussion
Improve Article
Save Article
  • Last Updated : 20 Apr, 2022
View Discussion
Improve Article
Save Article

Semantic UI is an open-source framework that has some predefined classes to make our website look beautiful and responsive. It is similar to bootstrap as it has pre-defined classes for use. It used CSS and jQuery to build the interface. It has some different types of elements that help us to create a beautiful website. 

Progress bars are used to show the amount of work completed out of total work, It is used to show the progression of a task using the bars.  Semantic UI Progress Types are used to show the progress using different types of progress bars.

In this article, we will discuss Semantic-UI Progress Types.

Semantic-UI Progress Types:

  • Standard: It is the standard progress bar.
  • Indicating: It is the visually indicating progress bar.

Syntax:

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

Example 1: The following code demonstrates the Semantic-UI Standard Progress Type.

HTML




<!DOCTYPE html>
<html>
<head>
  <title>Semantic-UI Progress Types</title>
  <link rel="stylesheet"
        href=
 
  <script src=
  </script>
  <script src=
  </script>
</head>
 
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
          GeeksforGeeks
        </h2>
        <h3>
          Semantic-UI Progress Types
        </h3>
    </div>
 
    <div class="ui progress">
        <div class="bar">
          <div class="progress"></div>
        </div>
        <div class="label">
          Standard Progress
        </div>
    </div>
 
    <div class="ui button btn1">-</div>
    <div class="ui button btn2">+</div>
 
    <script>
        $('.ui.button.btn1').on('click', function () {
          $('.progress').progress('decrement');
        });
        $('.ui.button.btn2').on('click', function () {
          $('.progress').progress('increment');
        });
    </script>
</body>
</html>


Output:

Example 2: The following code demonstrates the Semantic-UI Indicating Progress Type.

HTML




<!DOCTYPE html>
<html>
<head>
  <title>Semantic-UI Progress Types</title>
  <link rel="stylesheet"
        href=
 
  <script src=
  </script>
  <script src=
  </script>
</head>
 
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
          GeeksforGeeks
        </h2>
        <h3> Semantic-UI Progress Types    </h3>
    </div>
 
    <div class="ui indicating progress">
        <div class="bar"></div>
        <div class="label">
          Indicating Progress
        </div>
    </div>
 
    <div class="ui button btn1">-</div>
    <div class="ui button btn2">+</div>
 
     <script>
        $('.ui.button.btn1').on('click', function () {
          $('.progress').progress('decrement');
        });
        $('.ui.button.btn2').on('click', function () {
          $('.progress').progress('increment');
        });
     </script>
</body>
</html>


Output:

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!