Create A Circular Progress Bar using HTML CSS

But how exactly do you do that?

<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>
<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>
<script>
const numb = document.querySelector(".key");
let counter = 0;
setInterval(() => {
if(counter == 95 ){
clearInterval();
}else{
counter+=1;
numb.textContent = counter + "%";
}
}, 80);
</script>

--

--

--

Innovative tech mind with 15 years of experience working as a computer programmer. Capable of working with a variety of technology and software solutions…

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Mini-Tutorial: Deleting Dynamically Added Form Elements in React

Limit Event Registrations

Build A Multiple Choice Trivia Game — React

IFTTT: Forex trading for beginners pdf South Africa

Confused about Slice and Slice functions in Javascript??? Let’s make it simpler.

How we built the DevTools Tooltips

Screenshot of DevTools, showing the new Focus Mode activity bar on the left, the perf tool at the top and the issues panel at the bottom, all 3 areas highlighted with the new Tooltips.

Easy Infinite Scrolling With Apollo Hooks in React Native

my first day of #1000daysofcoding

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Muhammad Rauf.

Muhammad Rauf.

Innovative tech mind with 15 years of experience working as a computer programmer. Capable of working with a variety of technology and software solutions…

More from Medium

Mobile Responsive CSS Grid made easy!

3D Bounce loading animation using CSS -Rare Programmer

HTML Basics - Linking Documents

Picking Fonts

How to create a responsive contact form using HTML