<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Bootstrap Progress Bar</
title
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
style
=
"text-align:center;"
>
<
h1
style
=
"color:green;"
>
GeeksforGeeks
</
h1
>
<
div
class
=
"container"
>
<
div
class
=
"progress"
>
<
div
class
=
"progress-bar"
style
=
"width:30%;"
>
30% Complete (Default)
</
div
>
</
div
>
<
div
class
=
"progress"
>
<
div
class
=
"progress-bar bg-success"
role
=
"progressbar"
aria-valuenow
=
"40"
aria-valuemin
=
"0"
aria-valuemax
=
"100"
style
=
"width:40%"
>
40% Complete (success)
</
div
>
</
div
>
<
div
class
=
"progress"
>
<
div
class
=
"progress-bar bg-info"
role
=
"progressbar"
aria-valuenow
=
"50"
aria-valuemin
=
"0"
aria-valuemax
=
"100"
style
=
"width:50%"
>
50% Complete (info)
</
div
>
</
div
>
<
div
class
=
"progress"
>
<
div
class
=
"progress-bar bg-warning"
role
=
"progressbar"
aria-valuenow
=
"60"
aria-valuemin
=
"0"
aria-valuemax
=
"100"
style
=
"width:60%"
>
60% Complete (warning)
</
div
>
</
div
>
<
div
class
=
"progress"
>
<
div
class
=
"progress-bar bg-danger"
role
=
"progressbar"
aria-valuenow
=
"70"
aria-valuemin
=
"0"
aria-valuemax
=
"100"
style
=
"width:70%"
>
70% Complete (danger)
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>