Semantic-UI Progress Variations
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.
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 > </ head > < body > < div class = "ui container" > < center > < div > < h1 class = "ui green header" > w3wiki </ 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.
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 > </ head > < body > < div class = "ui container" > < center > < div > < h1 class = "ui green header" >w3wiki</ 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 >w3wiki</ 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