Progress Bars
Style 1
Business Strategy
18%
Finance Consultancy
30%
Investment Plan
50%
Investment Banking
80%
Business Strategy
18%
Finance Consultancy
30%
Investment Plan
50%
Investment Banking
80%
<div class="row">
<div class="col-md-6 mb-1-9 mb-md-0">
<div class="progress-text">
<div class="row">
<div class="col-6">Business Strategy</div>
<div class="col-6 text-end">18%</div>
</div>
</div>
<div class="custom-progress progress">
<div class="animated custom-bar progress-bar slideInLeft" style="width:18%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="10" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Finance Consultancy</div>
<div class="col-6 text-end">30%</div>
</div>
</div>
<div class="custom-progress progress">
<div class="animated custom-bar progress-bar slideInLeft" style="width:30%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Investment Plan </div>
<div class="col-6 text-end">50%</div>
</div>
</div>
<div class="custom-progress progress">
<div class="animated custom-bar progress-bar slideInLeft" style="width:50%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Investment Banking</div>
<div class="col-6 text-end">80%</div>
</div>
</div>
<div class="custom-progress progress">
<div class="animated custom-bar progress-bar slideInLeft" style="width:80%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
</div>
<div class="col-md-6">
<div class="progress-text">
<div class="row">
<div class="col-6">Business Strategy</div>
<div class="col-6 text-end">18%</div>
</div>
</div>
<div class="custom-progress progress">
<div class="animated custom-bar progress-bar custom-bar-dark" style="width:18%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="10" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Finance Consultancy</div>
<div class="col-6 text-end">30%</div>
</div>
</div>
<div class="custom-progress progress">
<div class="animated custom-bar progress-bar custom-bar-dark" style="width:30%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Investment Plan </div>
<div class="col-6 text-end">50%</div>
</div>
</div>
<div class="custom-progress progress">
<div class="animated custom-bar progress-bar custom-bar-dark" style="width:50%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Investment Banking</div>
<div class="col-6 text-end">80%</div>
</div>
</div>
<div class="custom-progress progress">
<div class="animated custom-bar progress-bar custom-bar-dark" style="width:80%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
</div>
</div>
Style 2
Business Strategy
18%
Finance Consultancy
30%
Investment Plan
50%
Investment Banking
80%
Business Strategy
18%
Finance Consultancy
30%
Investment Plan
50%
Investment Banking
80%
<div class="row">
<div class="col-md-6 mb-1-9 mb-md-0">
<div class="progress-text">
<div class="row">
<div class="col-6">Business Strategy</div>
<div class="col-6 text-end">18%</div>
</div>
</div>
<div class="custom-progress progress progress-medium">
<div class="animated custom-bar progress-bar slideInLeft" style="width:18%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="10" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Finance Consultancy</div>
<div class="col-6 text-end">30%</div>
</div>
</div>
<div class="custom-progress progress progress-medium">
<div class="animated custom-bar progress-bar slideInLeft" style="width:30%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Investment Plan </div>
<div class="col-6 text-end">50%</div>
</div>
</div>
<div class="custom-progress progress progress-medium">
<div class="animated custom-bar progress-bar slideInLeft" style="width:50%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Investment Banking</div>
<div class="col-6 text-end">80%</div>
</div>
</div>
<div class="custom-progress progress progress-medium">
<div class="animated custom-bar progress-bar slideInLeft" style="width:80%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
</div>
<div class="col-md-6">
<div class="progress-text">
<div class="row">
<div class="col-6">Business Strategy</div>
<div class="col-6 text-end">18%</div>
</div>
</div>
<div class="custom-progress progress progress-medium">
<div class="animated custom-bar progress-bar custom-bar-dark" style="width:18%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="10" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Finance Consultancy</div>
<div class="col-6 text-end">30%</div>
</div>
</div>
<div class="custom-progress progress progress-medium">
<div class="animated custom-bar progress-bar custom-bar-dark" style="width:30%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Investment Plan </div>
<div class="col-6 text-end">50%</div>
</div>
</div>
<div class="custom-progress progress progress-medium">
<div class="animated custom-bar progress-bar custom-bar-dark" style="width:50%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Investment Banking</div>
<div class="col-6 text-end">80%</div>
</div>
</div>
<div class="custom-progress progress progress-medium">
<div class="animated custom-bar progress-bar custom-bar-dark" style="width:80%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
</div>
</div>
Style 3
Business Strategy
18%
Finance Consultancy
30%
Investment Plan
50%
Investment Banking
80%
Market Research
10%
Finance Consultancy
30%
Investment Plan
50%
Investment Banking
80%
<div class="row">
<div class="col-md-6 mb-1-9 mb-md-0">
<div class="progress-text">
<div class="row">
<div class="col-6">Business Strategy</div>
<div class="col-6 text-end">18%</div>
</div>
</div>
<div class="custom-progress progress progress-bold">
<div class="animated custom-bar progress-bar slideInLeft" style="width:18%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="10" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Finance Consultancy</div>
<div class="col-6 text-end">30%</div>
</div>
</div>
<div class="custom-progress progress progress-bold">
<div class="animated custom-bar progress-bar slideInLeft" style="width:30%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Investment Plan </div>
<div class="col-6 text-end">50%</div>
</div>
</div>
<div class="custom-progress progress progress-bold">
<div class="animated custom-bar progress-bar slideInLeft" style="width:50%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Investment Banking</div>
<div class="col-6 text-end">80%</div>
</div>
</div>
<div class="custom-progress progress progress-bold">
<div class="animated custom-bar progress-bar slideInLeft" style="width:80%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
</div>
<div class="col-md-6">
<div class="progress-text">
<div class="row">
<div class="col-6">Market Research</div>
<div class="col-6 text-end">10%</div>
</div>
</div>
<div class="custom-progress progress progress-bold">
<div class="animated custom-bar progress-bar custom-bar-dark" style="width:10%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="10" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Finance Consultancy</div>
<div class="col-6 text-end">30%</div>
</div>
</div>
<div class="custom-progress progress progress-bold">
<div class="animated custom-bar progress-bar custom-bar-dark" style="width:30%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Investment Plan </div>
<div class="col-6 text-end">50%</div>
</div>
</div>
<div class="custom-progress progress progress-bold">
<div class="animated custom-bar progress-bar custom-bar-dark" style="width:50%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
<div class="progress-text">
<div class="row">
<div class="col-6">Investment Banking</div>
<div class="col-6 text-end">80%</div>
</div>
</div>
<div class="custom-progress progress progress-bold">
<div class="animated custom-bar progress-bar custom-bar-dark" style="width:80%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
</div>
</div>