.demo{
background: #deeaeb;
}
.progress-bar-outer{
background: #fff;
border-radius: 50px;
padding: 30px;
margin: 20px 0;
box-shadow: 0 0 10px rgba(209,219,231,0.7);
}
.progress{
height: 10px;
margin: 0;
overflow: visible;
border-radius: 50px;
background: #eaedf3;
box-shadow: inset 0 1px 10px rgba(0,0,0,0.1);
}
.progress .progress-bar{
border-radius: 50px;
position: relative;
animation: animate-positive 30s;
}
.progress .progress-bar:after{
content: "\f188";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 30px;
color: #000077;
position: absolute;
top: -6px;
right: -24px;
transform: rotate(90deg);
}
@-webkit-keyframes animate-positive{
0% { width: 0%;}
20% { width: 3%;}
30% { width: 9%;}
50% { width: 15%;}
70% { width: 25%;}
100% { width: 90%;}
}
@keyframes animate-positive{
0% { width: 0%;}
20% { width: 3%;}
30% { width: 9%;}
50% { width: 15%;}
70% { width: 25%;}
100% { width: 90%;}
}