Semantic-UI Progress Inverted Variation
Last Updated :
09 Mar, 2022
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=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</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=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">GeeksforGeeks</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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...