<!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
>