Semantic-UI Progress Attached Variation
Last Updated :
07 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 Semantic UI Progress attached variation.
Semantic UI Progress Attached Variation is used for creating a progress bar that can show the progress of an element in the top or bottom attachment.
Semantic UI Progress Attached Variation Classes:
- top attached: This class is used for creating a progress bar that can show the progress of an element in the top part.
- bottom attached: This class is used for creating a progress bar that can show the progress of an element in the bottom part.
Syntax:
<div class="ui segment">
<div class="ui Attached-Variation-Class progress">
<div class="bar"></div>
</div>
....
</div>
Example 1: The below example illustrates the Semantic UI top and bottom progress attached 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">GeeksforGeeks</h1>
<strong>Semantic-UI Progress Attached Variation </strong>
</center>
<div class="ui segment">
<div class="ui top attached progress">
<div class="bar"></div>
</div>
<p>GFG gfg</p>
<div class="ui bottom attached progress">
<div class="bar"></div>
</div>
</div>
<div class="ui button">Increase</div>
<script>
$('.ui.button').on('click', function () {
$('.progress').progress('increment');
});
</script>
</body>
</html>
Output:
Semantic-UI Progress Attached Variation
Example 2: The below example illustrates the Semantic UI bottom progress attached 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">GeeksforGeeks</h1>
<strong>Semantic-UI Progress Attached Variation</strong>
<div class="ui card">
<div class="image">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
</div>
<div class="content">
<a class="header">GeeksforGeeks Logo</a>
</div>
<div class="ui bottom attached progress">
<div class="bar"></div>
</div>
</div>
<div class="ui button">Increase</div>
<script>
$('.ui.button').on('click', function () {
$('.progress').progress('increment');
});
</script>
</center>
</body>
</html>
Output:
Semantic-UI Progress Attached Variation
Reference link: https://semantic-ui.com/modules/progress.html#attached