Chat List

Show All

  • A
  • B
  • D
  • J
  • O
Chat with Khelesh

Online

Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Notications

Show All

  • SEVER STATUS
  • KK
  • SOCIAL
  • RU
  • SEVER STATUS
  • AU
  • MO
Notes

Add New Nots

Progressbar

Welcome Back Yatin Sharma!

$2353.25

Withdraw Money
Main Menu

Default Progress bars

Default progress bar style

60% Complete
<div class="progress">
<div class="progress-bar bg-danger" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>

Striped Progress bar

add .progress-bar-striped to change the style

85% Complete (success)
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%; height:10px;" role="progressbar">
<span class="sr-only">85% Complete (success)</span>
</div>
</div>

Colored Progress bar

add bg-primary, .bg-danger, .bg-info to change the style

60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
<div class="progress mt-3">
<div class="progress-bar bg-danger" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-info" style="width: 40%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-success" style="width: 20%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-primary" style="width: 30%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-warning" style="width: 80%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-inverse" style="width: 40%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>

Different bar sizes

add bg-primary, .bg-danger, .bg-info to change the style

60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
<div class="progress mt-3 h-auto">
<div class="progress-bar bg-danger" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3 h-auto">
<div class="progress-bar bg-info" style="width: 40%; height:8px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3 h-auto">
<div class="progress-bar bg-success" style="width: 20%; height:10px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3 h-auto">
<div class="progress-bar bg-primary" style="width: 30%; height:12px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3 h-auto">
<div class="progress-bar bg-warning" style="width: 80%; height:14px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>

Animated Striped bar

add bg-primary, .bg-danger, .bg-info to change the style

60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
<div class="progress mt-3">
<div class="progress-bar active progress-bar-striped bg-danger" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-info active progress-bar-striped" style="width: 40%; height:8px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-success active progress-bar-striped" style="width: 20%; height:10px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-primary active progress-bar-striped" style="width: 30%; height:12px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-warning active progress-bar-striped" style="width: 80%; height:14px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>

Vertical Progress bars

add .progress-vertical to change the style

60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
 <div class="progress progress-vertical">
<div class="progress-bar bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-info" style="width:4px; height:80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-success" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-primary" style="width:4px; height:40%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-warning" style="width:4px; height:30%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>

Vertical Progress From bottom

add .progress-vertical to change the style

60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-info" style="width:4px; height:80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-success" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-primary" style="width:4px; height:40%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical-bottom">
<div class="progress-bar bg-warning" style="width:4px; height:30%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>

Different size Progress bars

add .progress-vertical to change the style

60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
<div class="progress progress-vertical">
<div class="progress-bar bg-danger" style="width:4px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-info" style="width:6px; height:80%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-success" style="width:8px; height:60%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-primary" style="width:10px; height:40%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress progress-vertical">
<div class="progress-bar bg-warning" style="width:14px; height:30%;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>

Animated bars

add .progress-vertical to change the style

60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
 <div class="progress mt-3">
<div class="progress-bar bg-danger progress-animated" style="width: 60%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-info progress-animated" style="width: 40%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-success progress-animated" style="width: 20%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-primary progress-animated" style="width: 30%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-warning progress-animated" style="width: 80%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<div class="progress mt-3">
<div class="progress-bar bg-inverse progress-animated" style="width: 40%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>

SKILL BARS

add .progress-animated to change the style

Photoshop 85%
60% Complete
Code editor 90%
60% Complete
Illustrator 65%
60% Complete
<h6>Photoshop
<span class="pull-end">85%</span>
</h6>
<div class="progress ">
<div class="progress-bar bg-danger progress-animated" style="width: 85%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<h6 class="mt-4">Code editor
<span class="pull-end">90%</span>
</h6>
<div class="progress">
<div class="progress-bar bg-info progress-animated" style="width: 90%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>
<h6 class="mt-4">Illustrator
<span class="pull-end">65%</span>
</h6>
<div class="progress">
<div class="progress-bar bg-success progress-animated" style="width: 65%; height:6px;" role="progressbar">
<span class="sr-only">60% Complete</span>
</div>
</div>