sleek-dashboard/src/progress-bar.html

Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com

---
layout: default
title: "Progressbar - Sleek Admin Dashboard Template"


parent: "components"
sub_parent: "components"
activePage: "progress-bar"
plugins: []
---
							<div class="breadcrumb-wrapper">
								<h1>Progress Bar</h1>
								{% include breadcrumb.htm %}
							</div>

							<div class="row">
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Default Progress Bars </h2>
										</div>
										<div class="card-body">
											<p class="mb-5">Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels <a href="https://getbootstrap.com/docs/4.4/components/progress/" target="_blank"> more details.</a></p>
											<div class="progress mb-3">
												<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
											</div>
											<div class="progress mb-3">
												<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
											</div>
											<div class="progress mb-3">
												<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
											</div>
											<div class="progress mb-3">
												<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
											</div>
											<div class="progress">
												<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
												 aria-valuemax="100"></div>
											</div>
										</div>
									</div>

									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2> Multiple bars </h2>
										</div>
										<div class="card-body">
											<p class="mb-5">Include multiple progress bars in a progress component if you need. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/progress/" target="_blank"> more details.</a></p>
											<div class="progress mb-3">
												<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
												<div class="progress-bar bg-warning" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0"
												 aria-valuemax="100"></div>
												<div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0"
												 aria-valuemax="100"></div>
											</div>
											<div class="progress mb-3">
												<div class="progress-bar bg-success" role="progressbar" style="width: 27%" aria-valuenow="27" aria-valuemin="0"
												 aria-valuemax="100"></div>
												<div class="progress-bar bg-danger" role="progressbar" style="width: 30%" aria-valuenow="35" aria-valuemin="0"
												 aria-valuemax="100"></div>
												<div class="progress-bar bg-info" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0"
												 aria-valuemax="100"></div>
											</div>
											<div class="progress">
												<div class="progress-bar bg-danger" role="progressbar" style="width: 35%" aria-valuenow="30" aria-valuemin="0"
												 aria-valuemax="100"></div>
												<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
												 aria-valuemax="100"></div>
												<div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0"
												 aria-valuemax="100"></div>
											</div>
										</div>
									</div>
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Progress Bar Height</h2>
										</div>
										<div class="card-body">
											<p class="mb-5">We only set a <code>height</code> value on the <code>.progress</code>, so if you change that value the inner <code>.progress-bar</code> will automatically resize accordingly. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/progress/" target="_blank"> more details.</a></p>
											<div class="progress mb-3" style="height: 2px;">
												<div class="progress-bar bg-info" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0"
												 aria-valuemax="100"></div>
											</div>
											<div class="progress mb-3" style="height: 5px;">
												<div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0"
												 aria-valuemax="100"></div>
											</div>
											<div class="progress mb-3" style="height: 8px;">
												<div class="progress-bar bg-warning" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0"
												 aria-valuemax="100"></div>
											</div>
											<div class="progress mb-3" style="height: 12px;">
												<div class="progress-bar bg-danger" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0"
												 aria-valuemax="100"></div>
											</div>
											<div class="progress" style="height: 16px;">
												<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0"
												 aria-valuemax="100"></div>
											</div>

										</div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Progress Bar Labels</h2>
										</div>
										<div class="card-body">
											<p class="mb-5">Add labels to your progress bars by placing text within the <code>.progress-bar</code>. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.4/components/progress/" target="_blank">
													more details.</a></p>
											<div class="progress mb-3">
												<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
											</div>
											<div class="progress mb-3">
												<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
												 aria-valuemax="100">50%</div>
											</div>
											<div class="progress mb-3">
												<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0"
												 aria-valuemax="100">75%</div>
											</div>
											<div class="progress">
												<div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
												 aria-valuemax="100">100%</div>
											</div>

										</div>
									</div>

									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Striped Progress Bar</h2>
										</div>
										<div class="card-body">
											<p class="mb-5">Add <code>.progress-bar-striped</code> to any <code>.progress-bar</code> to apply a stripe via CSS gradient over the progress bar’s background color. Read Bootstrap	documentaion <a href="https://getbootstrap.com/docs/4.4/components/progress/" target="_blank">
													more details.</a></p>
											<div class="progress mb-3">
												<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 25%" aria-valuenow="25"
												 aria-valuemin="0" aria-valuemax="100"></div>
											</div>
											<div class="progress mb-3">
												<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 50%" aria-valuenow="50"
												 aria-valuemin="0" aria-valuemax="100"></div>
											</div>
											<div class="progress mb-3">
												<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75"
												 aria-valuemin="0" aria-valuemax="100"></div>
											</div>
											<div class="progress">
												<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 100%" aria-valuenow="100"
												 aria-valuemin="0" aria-valuemax="100"></div>
											</div>
										</div>
									</div>

									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Animate Progress Bar</h2>
										</div>
										<div class="card-body">
											<p class="mb-5">The striped gradient can also be animated. Add <code> .progress-bar-animated </code> to <code> .progress-bar </code> to animate the stripes right to left via CSS3 animations. Read Bootstrap	documentaion <a href="https://getbootstrap.com/docs/4.4/components/progress/" target="_blank">
													more details.</a></p>
											<div class="progress mb-3">
												<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 25%"
												 aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
											</div>
											<div class="progress mb-3">
												<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 50%"
												 aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
											</div>
											<div class="progress mb-3">
												<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 75%"
												 aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
											</div>
											<div class="progress">
												<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 100%"
												 aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
											</div>
										</div>
									</div>
								</div>
							</div>