Open In App

Semantic-UI Progress Indicating Type

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.

A Semantic UI Progress allows a user to show the progression of a task. Semantic UI Progress offers us 2 Types, 3 Content, 5 States, and 5 Variations.

In this article, we will learn about the Indicating Type. Semantic UI Progress Indicating Type is used for creating an indicating progress bar that visually indicates the current level of progress of the specified task.

Semantic UI Progress Indicating Type Class:

  •  indicating: This class is used for creating an indicating progress bar that visually indicates the current level of progress of the specified task.

Syntax:

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

Example 1: The below example illustrates the Semantic UI Progress Indicating Type.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 class="ui green header">Geeksforgeeks</h1>
        <strong>
            Semantic-UI Progress Indicating Type
        </strong>
    </center>
    <div class="ui container">
        <div class="ui progress" data-value="5" id="eg">
            <div class="ui indicating progress">
                <div class="bar">
                    <div class="progress"></div>
                </div>
                <div class="label">Progressing</div>
            </div>
        </div>
    </div>
    <script>
        $('#eg').progress();
    </script>
</body>
  
</html>


Output:

Semantic-UI Progress Indicating Type

Example 2: The following code demonstrates the indicating progress class with data-value and data-total attributes and increment parameter.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>
            Semantic-UI Progress Indicating Type
        </strong>
    </center>
    <div class="ui container">
        <div class="ui progress" data-value="0" data-total="30">
            <div class="ui indicating progress">
                <div class="bar">
                    <div class="progress"></div>
                </div>
                <div class="label">Progressing</div>
            </div>
        </div>
        <div class="ui button">Increase</div>
    </div>
    <script>
        $('.ui.button').on('click', function () {
            $('.progress').progress('increment');
        });
    </script>
</body>
  
</html>


Output:

Semantic-UI Progress Indicating Type

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



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