<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Semantic-UI Progress Color Variation</
title
>
<
link
href
=
rel
=
"stylesheet"
/>
<
script
src
=
integrity
=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
class
=
"ui container"
>
<
br
/><
br
/>
<
h2
class
=
"ui header green"
>GeeksforGeeks</
h2
>
<
strong
>Semantic-UI Progress Color Variation</
strong
>
<
hr
><
br
/>
<
div
class
=
"ui red progress"
data-percent
=
"10"
>
<
div
class
=
"bar"
></
div
>
<
div
class
=
"label"
>Red</
div
>
</
div
>
<
div
class
=
"ui orange progress"
data-percent
=
"15"
>
<
div
class
=
"bar"
></
div
>
<
div
class
=
"label"
>Orange</
div
>
</
div
>
<
div
class
=
"ui yellow progress"
data-percent
=
"20"
>
<
div
class
=
"bar"
></
div
>
<
div
class
=
"label"
>Yellow</
div
>
</
div
>
<
div
class
=
"ui olive progress"
data-percent
=
"25"
>
<
div
class
=
"bar"
></
div
>
<
div
class
=
"label"
>Olive</
div
>
</
div
>
<
div
class
=
"ui green progress"
data-percent
=
"30"
>
<
div
class
=
"bar"
></
div
>
<
div
class
=
"label"
>Green</
div
>
</
div
>
<
div
class
=
"ui teal progress"
data-percent
=
"35"
>
<
div
class
=
"bar"
></
div
>
<
div
class
=
"label"
>Teal</
div
>
</
div
>
<
div
class
=
"ui blue progress"
data-percent
=
"40"
>
<
div
class
=
"bar"
></
div
>
<
div
class
=
"label"
>Blue</
div
>
</
div
>
<
div
class
=
"ui violet progress"
data-percent
=
"45"
>
<
div
class
=
"bar"
></
div
>
<
div
class
=
"label"
>Violet</
div
>
</
div
>
<
div
class
=
"ui purple progress"
data-percent
=
"50"
>
<
div
class
=
"bar"
></
div
>
<
div
class
=
"label"
>Purple</
div
>
</
div
>
<
div
class
=
"ui pink progress"
data-percent
=
"60"
>
<
div
class
=
"bar"
></
div
>
<
div
class
=
"label"
>Pink</
div
>
</
div
>
<
div
class
=
"ui brown progress"
data-percent
=
"65"
>
<
div
class
=
"bar"
></
div
>
<
div
class
=
"label"
>Brown</
div
>
</
div
>
<
div
class
=
"ui grey progress"
data-percent
=
"70"
>
<
div
class
=
"bar"
></
div
>
<
div
class
=
"label"
>Grey</
div
>
</
div
>
<
div
class
=
"ui black progress"
data-percent
=
"80"
>
<
div
class
=
"bar"
></
div
>
<
div
class
=
"label"
>Black</
div
>
</
div
>
</
div
>
<
script
>
$('.progress').progress();
</
script
>
</
body
>
</
html
>