Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.
A Semantic UI Progress allows a user to show the progression of a task. Semantic UI Progress offers us 2 Types, 3 Content, 5 States, and 5 variations.
In this article, we will learn about the Semantic UI Progress variations.
Semantic UI Progress Variations:
- Inverted: It is used to set the progress bar with colors inverted.
- Attached: It is used for creating a progress bar that can show the progress of an element in the top or bottom attachment.
- Size: It is used to create different sizes of progress bars.
- Color: It is used to create different color progress components.
- Inverted Color: This is used to invert for improved contrast on dark backgrounds
Syntax:
<div class="ui Progress-Variation progress"> <div class="bar"></div> .... </div>
Example 1: Below examples illustrates the Semantic-UI Progress size and color variations.
<!DOCTYPE html> < html >
< head >
<!-- Scripts and CSS -->
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< center >
< div >
< h1 class = "ui green header" >
GeeksforGeeks
</ h1 >
< strong >Semantic-UI Progress Variations</ strong >
</ div >
</ center >
<!-- Tiny Sized Color 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 - Red Tiny Size
</ div >
</ div >
<!-- Small Sized color 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 - Orange Small Size
</ div >
</ div >
<!-- Default Sized Color 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 - Yellow Default Size
</ div >
</ div >
<!-- Large Sized Color 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 - Blue Large Size
</ div >
</ div >
<!-- Big Sized Color 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 - Pink Big Size
</ div >
</ div >
</ div >
< script >
$(".ui.progress").progress();
</ script >
</ body >
</ html >
|
Output:
Example 2: The following code demonstrates inverted and attached progress variation.
<!DOCTYPE html> < html >
< head >
<!-- Scripts and CSS -->
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< center >
< div >
< h1 class = "ui green header" >GeeksforGeeks</ h1 >
< strong >Semantic-UI Progress Variations</ strong >
</ div >
</ center >
< strong >Inverted Progress:</ strong >
< div class = "ui inverted segment" >
< div class = "ui inverted progress" data-value = "20"
data-total = "100" >
< div class = "bar" >
< div class = "progress" ></ div >
</ div >
< div class = "label" >Uploading Files</ div >
</ div >
< div class = "ui inverted progress success" data-value = "40"
data-total = "100" >
< div class = "bar" >
< div class = "progress" ></ div >
</ div >
< div class = "label" >File Sending</ div >
</ div >
</ div >
< strong >Attached Progress:</ strong >
< div class = "ui segment" >
< div class = "ui top attached progress" data-value = "20"
data-total = "100" >
< div class = "bar" ></ div >
</ div >
< p >GeeksforGeeks</ p >
< div class = "ui bottom attached green progress" data-value = "30"
data-total = "100" >
< div class = "bar" ></ div >
</ div >
</ div >
< strong >Inverted Color Progress:</ strong >
< div class = "ui inverted segment" >
< div class = "ui blue inverted progress" data-value = "10"
data-total = "100" >
< div class = "bar" >
< div class = "progress" ></ div >
< div class = "label" ></ div >
</ div >
</ div >
< div class = "ui green inverted progress" data-value = "10"
data-total = "100" >
< div class = "bar" >
< div class = "progress" ></ div >
< div class = "label" ></ div >
</ div >
</ div >
</ div >
</ div >
< script >
$(".ui.progress").progress();
</ script >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/modules/progress.html