Elite Admin

Progressbar

Bootstrap Progressbar

Code Here:


									
<div class="progress mb-3">
    <div class="progress-bar" role="progressbar" style="width: 15%;height: 2px;"
        aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
    <div class="progress-bar bg-success" role="progressbar" style="width: 25%;height: 2px;"
        aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
    <div class="progress-bar bg-info" role="progressbar" style="width: 50%;height: 2px;"
        aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
    <div class="progress-bar bg-warning" role="progressbar" style="width: 75%;height: 2px;"
        aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
    <div class="progress-bar bg-danger" role="progressbar" style="width: 100%;height: 2px;"
        aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
    <div class="progress-bar" role="progressbar" style="width: 15%;height: 2px;"
        aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%;height: 2px;"
        aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%;height: 2px;"
        aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="progress mb-3">
    <div class="progress-bar progress-bar-striped bg-danger" role="progressbar"
        style="width: 100%;height: 2px;" aria-valuenow="100" aria-valuemin="0"
        aria-valuemax="100"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated"
        role="progressbar" aria-valuenow="75" aria-valuemin="0"
        aria-valuemax="100" style="width: 75%;height: 2px;"></div>
</div>


									
								

Progressbar Size

Code Here


									
<div class="progress mb-3" style="height: 1px;">
    <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" style="height: 3px;">
    <div class="progress-bar" role="progressbar"
        style="width: 25%; height: 20px;" aria-valuenow="25" aria-valuemin="0"
        aria-valuemax="100"></div>
</div>
<div class="progress mb-3 progress-sm">
    <div class="progress-bar progress-lg bg-success" role="progressbar"
        style="width: 25%;height: 2px;" aria-valuenow="25" aria-valuemin="0"
        aria-valuemax="100"></div>
</div>
<div class="progress mb-3 progress-md">
    <div class="progress-bar bg-info" role="progressbar" style="width: 50%;height: 5px;"
        aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-lg mb-3">
    <div class="progress-bar bg-warning" role="progressbar" style="width: 75%;height: 7px;"
        aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-xl">
    <div class="progress-bar bg-success" role="progressbar" style="width: 38%;height: 9px;"
        aria-valuenow="38" aria-valuemin="0" aria-valuemax="100"></div>
</div>