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 =
< script src =
</ script >
< script src =
</ 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 =
< script src =
</ script >
< script src =
</ 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 =
</ 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...