Bootstrap Progress Bars
Progress Bars shows how much progress is there in a task.
Bootstrap css design progress bar of different type.
The class .progress within a
Example
Bootstrap Example
Progress Bars shows how much progress is there in a task.
Bootstrap css design progress bar of different type.
The class .progress within a
element is used to create a default progress bar in bootstrap.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br
/>
<br
/>
<div
class="progress">
<div
class="progress-bar"
role="progressbar"
aria-valuenow="70"
aria-valuemin="0"
aria-valuemax="100"
style="width:
70%">
<span
class="sr-only">70%
Complete</span>
</div>
</div>
</body>
</html>
Output
Progress Bars With Label
You have to remove "sr-only" to make a labeled progress bar.
Example
Output :
Bootstrap Example
Bootstrap Colored Progress barcontextual classes can be used for colored progress bar.
The classed are
Example
Bootstrap Example
You have to remove "sr-only" to make a labeled progress bar.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<title>Bootstrap
Example</title>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br
/>
<br
/>
<div
class="progress">
<div
class="progress-bar"
role="progressbar"
aria-valuenow="70"
aria-valuemin="0"
aria-valuemax="100"
style="width:
70%">
70%
</div>
</div>
</body>
</html>
Bootstrap Colored Progress barcontextual classes can be used for colored progress bar.
The classed are
- progress-bar-success
- progress-bar-info
- progress-bar-warning
- progress-bar-danger
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br
/>
<br
/>
<div
class="progress">
<div
class="progress-bar-success"
role="progressbar"
aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100"
style="width:
70%">70%
</div>
</div>
<div
class="progress">
<div
class="progress-bar-info"
role="progressbar"
aria-valuenow="70"
aria-valuemin="0"
aria-valuemax="100"
style="width:
60%">
70%
</div>
</div>
<div
class="progress">
<div
class="progress-bar-warning"
role="progressbar"
aria-valuenow="70"
aria-valuemin="0"
aria-valuemax="100"
style="width:
50%">
70%
</div>
</div>
<div
class="progress">
<div
class="progress-bar-danger"
role="progressbar"
aria-valuenow="70"
aria-valuemin="0"
aria-valuemax="100"
style="width:
40%">
70%
</div>
</div>
</div>
</body>
</html>
Output
Stripped Progress bar
You can use "progress-bar-striped" to create stripped progress bar.
Example
<html
lang="en">
<head>
<title>Bootstrap
Example</title>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br
/>
<br
/>
<div
class="progress">
<div
class="progress-bar-success
progress-bar-striped"
role="progressbar"
aria-valuenow="70" aria-valuemin="0"
aria-valuemax="100"
style="width:
70%">70%
</div>
</div>
</div>
</body>
</html>
Output :
Animated progress bar
You can use ".active" to create animated progress bar.
Example
<html
lang="en">
<head>
<title>Bootstrap
Example</title>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br
/>
<br
/>
<div
class="progress">
<div
class="progress-bar
progress-bar-striped active"
role="progressbar"
aria-valuenow="70"
aria-valuemin="0"
aria-valuemax="100"
style="width:
70%">
70%
</div>
</div>
</div>
</body>
</html>
