Bootstrap Progress Bar
Copy
<!-- Default Progress --><div class="progress"><div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div></div><!-- Success Progress --><div class="progress"><div class="progress-bar bg-success w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div></div><!-- Danger Progress --><div class="progress"><div class="progress-bar bg-danger w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div></div><!-- Warning Progress --><div class="progress"><div class="progress-bar bg-warning w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div></div>Skills Progress Bar
Copy
<!-- Single Skill Progress Bar --><div class="skill-progress-bar d-flex align-items-center"><!-- Skill Icon --><div class="skill-icon shadow-sm p-2"><svg width="24" height="24" viewBox="0 0 16 16" class="bi bi-code text-dark" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.854 4.146a.5.5 0 0 1 0 .708L2.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm4.292 0a.5.5 0 0 0 0 .708L13.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"/></svg></div><!-- Skill Data --><div class="skill-data"><!-- Skill Name --><div class="skill-name d-flex align-items-center justify-content-between"><p class="mb-1">HTML5</p><small class="mb-1"><span class="counter">78</span>%</small></div><!-- Progress --><div class="progress" style="height: 4px;"><div class="progress-bar" style="width: 78%;" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div></div></div></div>Upload Data Progress
Copy
<h6>Uploading...</h6><!-- Progress--><div class="progress" style="height: 6px;"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 93%;" role="progressbar" aria-valuenow="93" aria-valuemin="0" aria-valuemax="100"></div></div><!-- Progress Info--><div class="progress-info d-flex align-items-center justify-content-between"><span>93%</span><span>17 sec remaining</span></div>Uploading...
93%17 sec remaining
Task Progress
Copy
<!-- Single Task Progress --><div class="single-task-progress"><!-- Progress Info --><div class="progress-info d-flex align-items-center justify-content-between"><h6 class="mb-1">Project Affan</h6><span class="mt-0 mb-1">70% done</span></div><!-- Progress --><div class="progress" style="height: 4px;"><div class="progress-bar bg-danger" style="width: 70%;" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div></div><div class="task-member-info d-flex align-items-center justify-content-between"><!-- Who working --><div class="who-working mt-2"><a href="#"><img class="shadow-sm" src="img/bg-img/7.jpg" alt=""></a><a href="#"><img class="shadow-sm" src="img/bg-img/8.jpg" alt=""></a><a href="#"><img class="shadow-sm" src="img/bg-img/9.jpg" alt=""></a></div><!-- Add New Member --><div class="addnew-member mt-2"><a class="btn btn-sm btn-danger btn-round" href="#">Add New</a></div></div></div>
