Horje
Semantic-UI Progress Types

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=
"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>
    <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=
"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>
    <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


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
Semantic-UI Form Grouped Fields Variation Semantic-UI Form Grouped Fields Variation
Semantic-UI Rail Internal Type Semantic-UI Rail Internal Type
Semantic-UI Dimmer Disabled State Semantic-UI Dimmer Disabled State
Semantic-UI Menu Borderless Variation Semantic-UI Menu Borderless Variation
Semantic-UI Reveal States Semantic-UI Reveal States

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 9



 

Horje