HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
A progress bar can be used to show how far a user is in aprocess
A progress bar can be used to show how far a user is in a process.
To create a default progress bar, add a .progress class to a
container element
and add the .progress-bar class to its child element. Use the CSS width property to set the width of the progress bar:
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
The height of the progress bar is 1rem (usually 16px) by default. Use the CSS height property to change
it. Note that you must set the same height for the progress container and the
progress bar:
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
Add text inside the progress bar to show the visible percentage:
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
By default, the progress bar is blue (primary). Use any of the contextual background classes to change its color:
<!-- Blue -->
<div class="progress">
<div class="progress-bar"
style="width:10%"></div>
</div>
<!-- Green -->
<div
class="progress">
<div
class="progress-bar bg-success" style="width:20%"></div>
</div>
<!--
Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning"
style="width:40%"></div>
</div>
<!-- Red -->
<div
class="progress">
<div class="progress-bar bg-danger"
style="width:50%"></div>
</div>
<!-- White -->
<div
class="progress border">
<div
class="progress-bar bg-white" style="width:60%"></div>
</div>
<!--
Grey -->
<div class="progress">
<div class="progress-bar bg-secondary"
style="width:70%"></div>
</div>
<!-- Light Grey -->
<div
class="progress border">
<div class="progress-bar bg-light"
style="width:80%"></div>
</div>
<!--
Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
Use the .progress-bar-striped class to add stripes to the progress bars:
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
Add the .progress-bar-animated class to animate the progress bar:
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
Progress bars can also be stacked:
<div class="progress">
<div class="progress-bar bg-success"
style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger"
style="width:20%">
Danger
</div>
</div>