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. It uses a class to add CSS to the elements.
A progress bar shows the progress of a task. Let’s see some examples.
Example: jQuery Code.
$( '.ui.button' ).on( 'click' , function () {
var $progress = $( '.ui.progress' ),
$button = $( this ),
updateEvent
;
clearInterval(window.fakeProgress)
$progress.progress( 'reset' );
window.fakeProgress = setInterval( function () {
$progress.progress( 'increment' );
$button.text( $progress.progress( 'get value' ) );
if ($progress.progress( 'is complete' )) {
clearInterval(window.fakeProgress)
}
}, 10);
});
$( '.ui.progress' ).progress({
duration : 100,
total : 100,
text : {
active: '{value} of {total} done'
}
}); |
Complete Code:
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div style = "margin-top: 20px"
class = "ui container" >
< div class = "ui indicating progress" data-value = "1" data-total = "100"
id = "example5" >
< div class = "bar" >
< div class = "progress" ></ div >
</ div >
</ div >
< div class = "ui button" >click me</ div >
</ div >
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
< script >
$('.ui.button').on('click', function() {
var
$progress = $('.ui.progress'),
$button = $(this),
updateEvent
;
clearInterval(window.fakeProgress)
$progress.progress('reset');
window.fakeProgress = setInterval(function() {
$progress.progress('increment');
$button.text( $progress.progress('get value') );
if($progress.progress('is complete')) {
clearInterval(window.fakeProgress)
}
}, 10);
});
$('.ui.progress').progress({
duration : 100,
total : 100,
text : {
active: '{value} of {total} done'
}
});
</ script >
</ body >
</ html >
|
Output:
Example:
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div style = "margin-top: 100px" class = "ui container" >
< div class = "ui indicating progress" data-value = "1" data-total = "10" >
< div class = "bar" >
< div class = "progress" ></ div >
</ div >
< div class = "label" >Adding Data</ div >
</ div >
< div class = "ui button" >click me</ div >
</ div >
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
< script >
$('.ui.button').on('click', function() {
$('.progress').progress('increment');
});
</ script >
</ body >
</ html >
|
Output:
Example:
States
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div style = "margin-top: 100px" class = "ui container" >
< h2 >Active</ h2 >
< div class = "ui active progress" data-percent = "74" >
< div class = "bar" >
< div class = "progress" ></ div >
</ div >
< div class = "label" >Downloading</ div >
</ div >
< h2 >Success</ h2 >
< div class = "ui progress success" data-value = "20" data-total = "20"
id = "finish" >
< div class = "bar" >
< div class = "progress" ></ div >
</ div >
< div class = "label" >Download Finish</ div >
</ div >
< h2 >Warning</ h2 >
< div class = "ui progress warning" >
< div class = "bar" >
< div class = "progress" ></ div >
</ div >
< div class = "label" >
Sorry You don't have enough space to download this. </ div >
</ div >
< h2 >Error</ h2 >
< div class = "ui progress error" >
< div class = "bar" >
< div class = "progress" ></ div >
</ div >
< div class = "label" >Sorry, There was some error</ div >
</ div >
</ div >
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
< script >
$('#finish').progress('increment')
</ script >
</ body >
</ html >
|
Output: