.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%;} }