<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
class
=
"ui container"
>
<
center
>
<
div
>
<
h1
class
=
"ui green header"
>GeeksforGeeks</
h1
>
<
strong
>Semantic-UI Progress Variations</
strong
>
</
div
>
</
center
>
<
strong
>Inverted Progress:</
strong
>
<
div
class
=
"ui inverted segment"
>
<
div
class
=
"ui inverted progress"
data-value
=
"20"
data-total
=
"100"
>
<
div
class
=
"bar"
>
<
div
class
=
"progress"
></
div
>
</
div
>
<
div
class
=
"label"
>Uploading Files</
div
>
</
div
>
<
div
class
=
"ui inverted progress success"
data-value
=
"40"
data-total
=
"100"
>
<
div
class
=
"bar"
>
<
div
class
=
"progress"
></
div
>
</
div
>
<
div
class
=
"label"
>File Sending</
div
>
</
div
>
</
div
>
<
strong
>Attached Progress:</
strong
>
<
div
class
=
"ui segment"
>
<
div
class
=
"ui top attached progress"
data-value
=
"20"
data-total
=
"100"
>
<
div
class
=
"bar"
></
div
>
</
div
>
<
p
>GeeksforGeeks</
p
>
<
div
class
=
"ui bottom attached green progress"
data-value
=
"30"
data-total
=
"100"
>
<
div
class
=
"bar"
></
div
>
</
div
>
</
div
>
<
strong
>Inverted Color Progress:</
strong
>
<
div
class
=
"ui inverted segment"
>
<
div
class
=
"ui blue inverted progress"
data-value
=
"10"
data-total
=
"100"
>
<
div
class
=
"bar"
>
<
div
class
=
"progress"
></
div
>
<
div
class
=
"label"
></
div
>
</
div
>
</
div
>
<
div
class
=
"ui green inverted progress"
data-value
=
"10"
data-total
=
"100"
>
<
div
class
=
"bar"
>
<
div
class
=
"progress"
></
div
>
<
div
class
=
"label"
></
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
$(".ui.progress").progress();
</
script
>
</
body
>
</
html
>