Semantic-UI Progress Inverted Variation
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
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 Inverted variation. Semantic UI Progress inverted variation is used for creating a progress bar containing its colors inverted.
Semantic UI Progress inverted variation class:
- inverted: This class is used for creating a progress bar containing inverted colors.
Syntax:
<div class="ui inverted segment"> <div class="ui inverted progress ...."> <div class="bar"> <div class="progress"></div> </div> ... </div> ... </div>
Example 1: The below example illustrates the Semantic UI progress inverted Variation.
HTML
<!DOCTYPE html> < html > < head > < 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 > < center > < h1 class = "ui green header" >w3wiki</ h1 > < strong > Semantic-UI Progress Inverted Variation </ strong > </ center > < div class = "ui inverted segment" > < div class = "ui inverted progress" > < div class = "bar" > < div class = "progress" ></ div > </ div > < div class = "label" >Progressing</ div > </ div > < div class = "ui inverted progress success" data-value = "100" data-total = "100" > < div class = "bar" > < div class = "progress" ></ div > </ div > < div class = "label" >Success</ div > </ div > </ div > < div class = "ui button" >Increase</ div > < script > $(".ui.progress").progress(); $('.ui.button').on('click', function () { $('.progress').progress('increment'); }); </ script > </ body > </ html > |
Output:
Example 2: The following code demonstrates the inverted progress class along with success, warning, error classes.
HTML
<!DOCTYPE html> < html > < head > < 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 > < center > < h1 class = "ui green header" >w3wiki</ h1 > < strong > Semantic-UI Progress Inverted Variation </ strong > </ center > < div class = "ui inverted segment" > < div class = "ui inverted progress" > < div class = "bar" > < div class = "progress" ></ div > </ div > < div class = "label" >Progressing</ div > </ div > < div class = "ui inverted progress success" data-value = "100" data-total = "100" > < div class = "bar" > < div class = "progress" ></ div > </ div > < div class = "label" >Success</ div > </ div > < div class = "ui inverted progress warning" data-value = "100" data-total = "100" > < div class = "bar" > < div class = "progress" ></ div > </ div > < div class = "label" >Warning</ div > </ div > < div class = "ui inverted progress error" data-value = "100" data-total = "100" > < div class = "bar" > < div class = "progress" ></ div > </ div > < div class = "label" >Error</ div > </ div > </ div > < div class = "ui button" >Increase</ div > < script > $(".ui.progress").progress(); $('.ui.button').on('click', function () { $('.progress').progress('increment'); }); </ script > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/modules/progress.html#inverted
Contact Us