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=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</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=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container center aligned">
<h2 style="color:green">
GeeksforGeeks
</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