Semantic-UI Progress Size Variation - Coding

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

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

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

Reffered: https://www.geeksforgeeks.org

CSS

Related
Semantic-UI Dropdown Multiple Search Selection Type
Semantic-UI Progress Label Content
Semantic-UI Loader States
Bulma Button Group with Addons
Semantic-UI Icon Set Logistics

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