Skip to content
Related Articles

Related Articles

Semantic-UI Progress States

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

Semantic UI is an open-source UI framework that uses CSS and jQuery to build great web experiences. It is also compatible with other CSS frameworks like Bootstrap.

A Progress module is used to show the progress of a task to the user. In this article, we will be seeing the different states of the progress module in Semantic UI. The Semantic-UI Progress States offers us son many states all the states are mentioned and described below.

Semantic-UI Progress States:

  • active: This class is used on the progress module to set its state to active.
  • success: This class is used on the progress module to set its state to success.
  • warning: This class is used on the progress module to set its state to warn.
  • error: This class is used on the progress module to set its state to error.
  • disabled: This class is used on the progress module to set its state to disabled.

Syntax:

<div class="ui Progress-States progress">
    ....
</div>

Example1: The below example shows the use of the progress state classes to change the state of a progress bar.

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI - Progress States</title>
        <link rel="stylesheet" href=
        />
        <script src=
        </script>
        <script src=
       </script>
 
        <style>
            .ui.container {
                text-align: center;
            }
 
            h3 {
                margin-top: 0px;
            }
 
            .ui.progress {
                margin-top: 30px !important;
            }
        </style>
    </head>
 
    <body>
        <div class="ui container">
            <div>
                <h1 class="ui green header">GeeksforGeeks</h1>
                <strong>Semantic UI - Progress States</strong>
            </div>
 
            <div class="ui active progress"
                 data-value="25"
                 data-total="100">
                <div class="bar">
                    <div class="progress"></div>
                </div>
                <div class="label">Progress - Active State</div>
            </div>
 
            <div class="ui progress success"
                 data-value="100"
                 data-total="100">
                <div class="bar">
                    <div class="progress"></div>
                </div>
                <div class="label">Progress - Success State</div>
            </div>
 
            <div class="ui warning progress"
                 data-value="100"
                 data-total="100">
                <div class="bar">
                    <div class="progress"></div>
                </div>
                <div class="label">Progress - Warning State</div>
            </div>
 
            <div class="ui error progress"
                 data-value="100"
                 data-total="100">
                <div class="bar">
                    <div class="progress"></div>
                </div>
                <div class="label">Progress - Error State</div>
            </div>
 
            <div class="ui disabled progress"
                 data-value="100"
                 data-total="100">
                <div class="bar">
                    <div class="progress"></div>
                </div>
                <div class="label">Progress - Disabled State</div>
            </div>
        </div>
 
        <script>
            $(".ui.progress").progress();
        </script>
    </body>
</html>


Output:

Semantic-UI Progress States

Semantic-UI Progress States

Example2: The example below shows the use of progress states in Semantic UI with different sizes of the progress bar.

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI - Progress States</title>
        <link rel="stylesheet" href=
        />
        <script src=
       </script>
        <script src=
        </script>
 
        <style>
            .ui.container {
                text-align: center;
                padding: 10%;
            }
            h3 {
                margin-top: 0px;
            }
            .ui.progress {
                margin-top: 30px !important;
            }
        </style>
    </head>
 
    <body>
        <div class="ui container">
            <div>
                <h1 class="ui green header">GeeksforGeeks</h1>
                <strong>Semantic UI - Progress States</strong>
            </div>
            <!-- Active & Tiny Progress Bar -->
            <div class="ui active progress tiny"
                  data-value="25" data-total="100">
                <div class="bar">
                    <div class="progress"></div>
                </div>
                <div class="label">
                   Progress - Active State and Tiny Sized
                </div>
            </div>
 
            <!-- Success & Small Progress Bar -->
            <div class="ui progress success small"
                 data-value="100" data-total="100">
                <div class="bar">
                    <div class="progress"></div>
                </div>
                <div class="label">
                    Progress - Success State and Small Sized
                </div>
            </div>
 
            <!-- Warning & Normal Sized Progress Bar -->
            <div class="ui warning progress"
                data-value="100" data-total="100">
                <div class="bar">
                    <div class="progress"></div>
                </div>
                <div class="label">
                    Progress - Warning State and Normal Sized
                </div>
            </div>
 
            <!-- Error & Large Progress Bar -->
            <div class="ui error progress large"
                 data-value="100" data-total="100">
                <div class="bar">
                    <div class="progress"></div>
                </div>
                <div class="label">
                    Progress - Error State and Large Sized
                </div>
            </div>
 
            <!-- Disabled & Big Progress Bar -->
            <div class="ui disabled progress big"
                 data-value="100" data-total="100">
                <div class="bar">
                    <div class="progress"></div>
                </div>
                <div class="label">
                    Progress - Disabled State and Big Sized
                </div>
            </div>
        </div>
 
        <script>
            $(".ui.progress").progress();
        </script>
    </body>
</html>


Output:

Semantic-UI Progress States

Semantic UI Progress States with size variation

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!