Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.
The progress bars indicate the progress of the work done out of the total work. It visually indicates the amount of work done using the bars. In this article, we will learn about the Progress Standard Type. This Standard Type indicates the progress of work on the progress bar.
Semantic-UI Progress Standard Type classes:
- progress: This class is used to indicate the progress of the work.
- indicating: This class is used to indicate the current level of progress of any work.
Syntax:
<div class="ui progress">
<div class="bar">
<div class="progress">...</div>
</div>
</div>Example 1: Below is the code that demonstrates the Progress Standard Type.
<!DOCTYPE html> <html>
<head>
<title>
Semantic-UI Progress Standard Type
</title>
<link rel="stylesheet" href=
</script>
<script src=
</script>
</head>
<body style="margin-inline: 10rem;">
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Progress Standard Type
</strong>
</center>
<div class="ui progress">
<div class="bar">
<div class="progress"></div>
</div>
<div class="label">Uploading Files</div>
</div>
<div class="ui button green">Increase</div>
<div class="ui button red">Decrease</div>
<script>
$('.ui.button.green').on('click', function () {
$('.progress').progress('increment');
});
$('.ui.button.red').on('click', function () {
$('.progress').progress('decrement');
});
</script>
</body>
</html>
|
Output:
Semantic-UI Progress Standard Type
Example 2: Below is the code that demonstrates the Progress Standard Type using indicating class.
<!DOCTYPE html> <html>
<head>
<title>
Semantic-UI Progress Standard Type
</title>
<link rel="stylesheet" href=
</script>
<script src=
</script>
</head>
<body style="margin-inline: 10rem;">
<center>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>
Semantic-UI Progress Standard Type
</strong>
</center>
<div class="ui indicating progress">
<div class="bar"></div>
<div class="label">Progressing...</div>
</div>
<div class="ui button green">Increase</div>
<div class="ui button red">Decrease</div>
<script>
$('.ui.button.green').on('click', function () {
$('.progress').progress('increment');
});
$('.ui.button.red').on('click', function () {
$('.progress').progress('decrement');
});
</script>
</body>
</html>
|
Output:
Semantic-UI Progress Standard Type
Reference link: https://semantic-ui.com/modules/progress.html#standard