Semantic-UI Progress Size Variation
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 >
< 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 >
< 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 >
< 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 >
< 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 >
< 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 >
< 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 >
< 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 >
< 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 >
< 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 >
< 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 >
< 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 >
< 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
Last Updated :
22 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...