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.
<!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:
Example2: The example below shows the use of progress states in Semantic UI with different sizes of the progress bar.
<!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:
Reference link: https://semantic-ui.com/modules/progress.html#active