Open In App

Semantic-UI Progress Size Variation

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is a CSS framework built with less and jQuery. It ships with pre-styled elements and modules which helps developers to build responsive and beautiful web interfaces faster.

A Semantic UI Progress module is used to show the progress of any task to the user on the front end. In this article, we will be seeing the different sizes of the progress module in Semantic UI.

Semantic UI Progress Size Classes:

  • tiny: This class is used on the progress module to make it the smallest in size.
  • small: This class is used on the progress module to make it small in size.
  • large: This class is used on the progress module to make it large in size
  • big: This class is used on the progress module to make it the largest size.

Syntax:

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

Example 1: The below example shows the use of the progress size classes to change the size of a progress bar in Semantic UI.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Scripts and CSS -->
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
  
    <style>
        .ui.container {
            text-align: center;
        }
  
        h4 {
            margin-top: 0px;
        }
  
        .ui.progress {
            margin-top: 30px !important;
        }
    </style>
</head>
  
<body>
    <div class="ui container">
        <div>
            <h1 style="color: green">GeeksforGeeks</h1>
            <h4>Semantic UI - Progress Sizes Variation</h4>
        </div>
        <!-- Tiny Sized Progress Bar -->
        <div class="ui progress tiny" 
             data-value="40"
             data-total="100">
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">
              Progress Bar -  Tiny Size
            </div>
        </div>
  
        <!-- Small Sized Progress Bar -->
        <div class="ui progress small"
             data-value="50"
             data-total="100">
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">
              Progress - Small Size
            </div>
        </div>
  
        <!-- Default Sized Progress Bar -->
        <div class="ui progress" 
             data-value="60" 
             data-total="100">
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">
              Progress - Default Size
            </div>
        </div>
  
        <!-- Large Sized Progress Bar -->
        <div class="ui progress large" 
             data-value="70"
             data-total="100">
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">
              Progress - Large Size
            </div>
        </div>
  
        <!-- Big Sized Progress Bar -->
        <div class="ui progress big" 
             data-value="80" 
             data-total="100">
            <div class="bar">
                <div class="progress"></div>
            </div>
            <div class="label">
              Progress - Big Size
            </div>
        </div>
    </div>
  
    <script>
        $(".ui.progress").progress();
    </script>
</body>
  
</html>


Output:

Semantic-UI Progress Size Variation

Semantic-UI Progress Size Variation

Example 2: The below example shows the progress sizes in Semantic UI with different colors.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Scripts and CSS -->
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
  
    <style>
        .ui.container {
            text-align: center;
        }
  
        h4 {
            margin-top: 0px;
        }
  
        .ui.progress {
            margin-top: 30px !important;
        }
    </style>
</head>
  
<body>
    <div class="ui container">
        <div>
            <h1 style="color: green">
              GeeksforGeeks
            </h1>
            <h4>Semantic UI - Progress Sizes Variation</h4>
        </div>
        <!-- Tiny Sized 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 -  Tiny Size
            </div>
        </div>
  
        <!-- Small Sized 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 - Small Size
            </div>
        </div>
  
        <!-- Default Sized 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 - Default Size
            </div>
        </div>
  
        <!-- Large Sized 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 - Large Size
            </div>
        </div>
  
        <!-- Big Sized 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 - Big Size
            </div>
        </div>
    </div>
  
    <script>
        $(".ui.progress").progress();
    </script>
</body>
  
</html>


Output:

Semantic-UI Progress Size Variation

Semantic-UI Progress Size Variation

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



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