Skip to content
Related Articles

Related Articles

Semantic-UI Progress Variations

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

Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

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 Semantic UI Progress variations.

Semantic UI Progress Variations:

  • Inverted: It is used to set the progress bar with colors inverted.
  • Attached: It is used for creating a progress bar that can show the progress of an element in the top or bottom attachment.
  • Size: It is used to create different sizes of progress bars.
  • Color: It is used to create different color progress components.
  • Inverted Color: This is used to invert for improved contrast on dark backgrounds

Syntax:

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

Example 1: Below examples illustrates the Semantic-UI Progress size and color variations.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- Scripts and CSS -->
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
 
</head>
 
<body>
    <div class="ui container">
        <center>
        <div>
            <h1 class="ui green header">
            GeeksforGeeks
            </h1>
            <strong>Semantic-UI Progress Variations</strong>
        </div>
        </center>
        <!-- Tiny Sized Color Progress Bar -->
        <div class="ui progress tiny red"
            data-value="40"
            data-total="100">
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">
            Progress Bar - Red Tiny Size
            </div>
        </div>
 
        <!-- Small Sized color Progress Bar -->
        <div class="ui progress small orange"
            data-value="50"
            data-total="100">
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">
            Progress - Orange Small Size
            </div>
        </div>
 
        <!-- Default Sized Color Progress Bar -->
        <div class="ui progress yellow"
            data-value="60"
            data-total="100">
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">
            Progress - Yellow Default Size
            </div>
        </div>
 
        <!-- Large Sized Color Progress Bar -->
        <div class="ui progress large blue"
            data-value="70"
            data-total="100">
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">
            Progress - Blue Large Size
            </div>
        </div>
 
        <!-- Big Sized Color Progress Bar -->
        <div class="ui progress big pink"
            data-value="80"
            data-total="100">
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">
            Progress - Pink Big Size
            </div>
        </div>
    </div>
 
    <script>
        $(".ui.progress").progress();
    </script>
</body>
 
</html>


Output:

Semantic-UI Progress Variations

Semantic-UI Progress Variations

Example 2: The following code demonstrates inverted and attached progress variation.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- Scripts and CSS -->
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
 
</head>
 
<body>
    <div class="ui container">
        <center>
            <div>
                <h1 class="ui green header">GeeksforGeeks</h1>
                <strong>Semantic-UI Progress Variations</strong>
            </div>
        </center>
        <strong>Inverted Progress:</strong>
        <div class="ui inverted segment">
          <div class="ui inverted progress" data-value="20"
            data-total="100">
            <div class="bar" >
              <div class="progress"></div>
            </div>
            <div class="label">Uploading Files</div>
          </div>
          <div class="ui inverted progress success" data-value="40"
            data-total="100">
            <div class="bar">
              <div class="progress"></div>
            </div>
            <div class="label">File Sending</div>
          </div>
       </div>
       <strong>Attached Progress:</strong>
       <div class="ui segment">
         <div class="ui top attached progress" data-value="20"
            data-total="100">
           <div class="bar"></div>
         </div>
          
<p>GeeksforGeeks</p>
 
         <div class="ui bottom attached green progress" data-value="30"
            data-total="100">
           <div class="bar"></div>
         </div>
       </div>
       <strong>Inverted Color Progress:</strong>
       <div class="ui inverted segment">
         <div class="ui blue inverted progress" data-value="10"
            data-total="100">
           <div class="bar">
             <div class="progress"></div>
             <div class="label"></div>
           </div>
         </div>
         <div class="ui green inverted progress" data-value="10"
            data-total="100">
           <div class="bar">
             <div class="progress"></div>
             <div class="label"></div>
           </div>
         </div>
       </div>
    </div>
    <script>
        $(".ui.progress").progress();
    </script>
</body>
</html>


Output:

Semantic-UI Progress Variations

Semantic-UI Progress Variations

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!