<html>
<head>
<title>progress_Bar</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<h3 class="progress-title">Heading - 90%</h3>
<div class="progress red">
<div class="progress-bar" style="width: 90%; background-color:#F51008;">
</div>
</div>
<h3 class="progress-title">Heading - 50%</h3>
<div class="progress green">
<div class="progress-bar" style="width: 50%; background-color:#13D73E;">
</div>
</div>
<h3 class="progress-title">Heading - 80%</h3>
<div class="progress blue">
<div class="progress-bar" style="width:80%; background-color:#0D47A1;">
</div>
</div>
<h3 class="progress-title">Heading - 65%</h3>
<div class="progress yellow">
<div class="progress-bar" style="width:65%; background-color:#F0C808;">
</div>
</div>
</div>
</div>
</div>
</body>
</html> body{
margin: 50px 0 !important;
}
h3{
margin: 0;
}
.progress-title{
font-size: 16px;
color:#011627;
margin:0px 0 20px;
font-weight: 700;
}
.progress{
background-color:#fff;
height:15px;
overflow: visible !important;
position: relative;
margin-bottom: 30px;
position: relative;
border-radius:20px !important;
box-shadow: none;
border:1px solid black;
}
.progress .progress-bar{
animation: animate-positive 2s;
position: relative;
box-shadow: none;
border-radius:20px !important;
}
.progress .progress-bar:after{
content:"";
position: absolute;
top: -12px;
right: 0px;
background-color: #FF918E;
height:35px;
width: 35px;
border-radius: 50%;
border:1px solid black;
}
.progress.green .progress-bar:after{
background-color:#A8FEBB;
}.progress.blue .progress-bar:after{
background-color: #9CF9FB;
}.progress.yellow .progress-bar:after{
background-color:#EFDC7C;
}
.progress .progress-bar:before{
content:"";
position: absolute;
top: -24px;
right: 0px;
background-color:#F51008;
height:15px;
width: 15px;
border-radius: 50%;
border:1px solid black;
}
.progress.green .progress-bar:before{
background-color:#13D73E;
}.progress.blue .progress-bar:before{
background-color: #679EF7;
}.progress.yellow .progress-bar:before{
background-color:#F0C808;
}
.progress .progress-value{
position: absolute;
padding: 3px 7px;
top:-50px;
right:-20px;
font-size:14px;
color:#ffffff;
background-color: #000000;
display: block;
}
.progress .progress-value:after{
content: "";
position: absolute;
bottom:-6px;
left: 35%;
border-top: 7px solid #000000;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
}
@-webkit-keyframes animate-positive {
0% { width: 0%; }
}
@keyframes animate-positive {
0% { width: 0%; }
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.