Semantic-UI Progress Types
Semantic UI is an open-source framework that has some predefined classes to make our website look beautiful and responsive. It is similar to bootstrap as it has pre-defined classes for use. It used CSS and jQuery to build the interface. It has some different types of elements that help us to create a beautiful website.
Progress bars are used to show the amount of work completed out of total work, It is used to show the progression of a task using the bars. Semantic UI Progress Types are used to show the progress using different types of progress bars.
In this article, we will discuss Semantic-UI Progress Types.
Semantic-UI Progress Types:
- Standard: It is the standard progress bar.
- Indicating: It is the visually indicating progress bar.
Syntax:
<div class="ui indicating progress"> <div class="bar"> .... </div> ... </div>
Example 1: The following code demonstrates the Semantic-UI Standard Progress Type.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic-UI Progress Types</ title > < 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 > </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ h2 > < h3 > Semantic-UI Progress Types </ h3 > </ div > < div class = "ui progress" > < div class = "bar" > < div class = "progress" ></ div > </ div > < div class = "label" > Standard Progress </ div > </ div > < div class = "ui button btn1" >-</ div > < div class = "ui button btn2" >+</ div > < script > $('.ui.button.btn1').on('click', function () { $('.progress').progress('decrement'); }); $('.ui.button.btn2').on('click', function () { $('.progress').progress('increment'); }); </ script > </ body > </ html > |
Output:
Example 2: The following code demonstrates the Semantic-UI Indicating Progress Type.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic-UI Progress Types</ title > < 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 > </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ h2 > < h3 > Semantic-UI Progress Types </ h3 > </ div > < div class = "ui indicating progress" > < div class = "bar" ></ div > < div class = "label" > Indicating Progress </ div > </ div > < div class = "ui button btn1" >-</ div > < div class = "ui button btn2" >+</ div > < script > $('.ui.button.btn1').on('click', function () { $('.progress').progress('decrement'); }); $('.ui.button.btn2').on('click', function () { $('.progress').progress('increment'); }); </ script > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/modules/progress.html