Circular progress bars are a basic of web development. It’s one of the little insignificant details that can extremely affect a user’s experience and progress. It’s easy to stick and just get one of those looped animated loadings spins an element on the web page. A really great impression to have is a usual loading bar with a percentage progression.
The Circular Progress Bar element lets you show the progress bar of a specific operation, like animated progress bar, a circular SVG model. Improving the stroke-dashoffset and stroke-dasharray values of the second shape creates the fill effect.
Creating Circular Progress Bar
If you have a little bit of understanding of JavaScript, then you can quickly get the JavaScript codes of this program and as you know CSS is too easy to learn and the color fills impression of this program is based on CSS only. If you love this program (Circular Progress Bar) and want to get source codes. To see the source codes you just need to scroll down.
Turns out you only require a dash of HTML, a little bit of CSS, and a pinch of JavaScript Code. Let’s started😉
HTML Code:
<div class="soft-circle">
<div class="inside"></div>
<div class="key">95%</div>
<div class="circle">
<div class="shade left">
<div class="progressing"></div>
</div>
<div class="shade right">
<div class="progressing"></div>
</div>
</div>
</div>CSS Code:
<style>
.soft-circle{
height:100px;
width: 100px;
position: relative;
border:solid #000 1px;
border-radius:50%;}
.soft-circle .inside{
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
height: 80px;
width: 80px;
margin: -40px 0 0 -40px;
background: #390a1f;
border-radius: 100%;}
.soft-circle .key{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
z-index:10;
font-size:18px;
font-weight:500;
color:#fff;}
.soft-circle .shade{
position: absolute;
height: 100%;
width: 100%;
background: #eee;
-webkit-border-radius: 100%;
clip: rect(0px, 100px, 100px, 50px);}
.circle .shade .progressing{
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 50px, 100px, 0px);
background: #4158d2;}
.circle .left .progressing{
z-index:1;
animation: left 4s linear both;
}
@keyframes left{
100%{transform: rotate(180deg);}
}
.circle .right {transform: rotate(180deg);
z-index:3;}
.circle .right .progressing{
animation: right 4s linear both;
animation-delay:4s;}
@keyframes right{
100%{transform: rotate(160deg);}
}
</style>JavaScript Code:
<script>
const numb = document.querySelector(".key");
let counter = 0;
setInterval(() => {
if(counter == 95 ){
clearInterval();
}else{
counter+=1;
numb.textContent = counter + "%";
}
}, 80);
</script>Now, All done you just need to copy the above-mentioned code and paste it where you want to show the amazing progress bar.