<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Semantic UI - Progress States</
title
>
<
link
rel
=
"stylesheet"
href
=
/>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
style
>
.ui.container {
text-align: center;
padding: 10%;
}
h3 {
margin-top: 0px;
}
.ui.progress {
margin-top: 30px !important;
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"ui container"
>
<
div
>
<
h1
class
=
"ui green header"
>GeeksforGeeks</
h1
>
<
strong
>Semantic UI - Progress States</
strong
>
</
div
>
<
div
class
=
"ui active progress tiny"
data-value
=
"25"
data-total
=
"100"
>
<
div
class
=
"bar"
>
<
div
class
=
"progress"
></
div
>
</
div
>
<
div
class
=
"label"
>
Progress - Active State and Tiny Sized
</
div
>
</
div
>
<
div
class
=
"ui progress success small"
data-value
=
"100"
data-total
=
"100"
>
<
div
class
=
"bar"
>
<
div
class
=
"progress"
></
div
>
</
div
>
<
div
class
=
"label"
>
Progress - Success State and Small Sized
</
div
>
</
div
>
<
div
class
=
"ui warning progress"
data-value
=
"100"
data-total
=
"100"
>
<
div
class
=
"bar"
>
<
div
class
=
"progress"
></
div
>
</
div
>
<
div
class
=
"label"
>
Progress - Warning State and Normal Sized
</
div
>
</
div
>
<
div
class
=
"ui error progress large"
data-value
=
"100"
data-total
=
"100"
>
<
div
class
=
"bar"
>
<
div
class
=
"progress"
></
div
>
</
div
>
<
div
class
=
"label"
>
Progress - Error State and Large Sized
</
div
>
</
div
>
<
div
class
=
"ui disabled progress big"
data-value
=
"100"
data-total
=
"100"
>
<
div
class
=
"bar"
>
<
div
class
=
"progress"
></
div
>
</
div
>
<
div
class
=
"label"
>
Progress - Disabled State and Big Sized
</
div
>
</
div
>
</
div
>
<
script
>
$(".ui.progress").progress();
</
script
>
</
body
>
</
html
>