Pure CSS Radial Progress Bar

Author
In CSS Tutorial, Skills Bar Jan 8, 2017
Pure CSS Radial Progress Bar

Pure CSS Radial Progress Bar

Have you try Animated Skills Bar using CSS3 Keyframes? What about making the similar thing but make it percentage circle? Today I am going to show you how to build them.

Few months backs I was working on a website which had a task to implement a design that incorporated radial progress bars. The design look awesome, the implementation worked by using the percircle but it is build with Jquery.

But I have a solution which works with purely CSS and HTML. You don’t need to rely on JS. The result will be same as the jquery one. Also, you can easily implement and customize as you want. It works with different classes to get various functions. Like you just need to apply a particular class to call the percentage in the radial.

Pure CSS Radial Progress Bar Implemenatoin

Ok, let’s have a look the HTML, and you don’t need to write a lot of HTML lines of code. We do simple used two divs and make the circle with the percentage.

Here we have the main div with two different classes. The first one is required for each ring and the second one progress-0 is all about how much percentage of correct you want to fill. In the example below, we have define 10.

<div class="radialProgressBar progress-10">
<div class="overlay">10</div>
</div>

The overlay allows us to hide the part of the circle and show only the bar. Also, Make sure that all of the class represents in the CSS section of the demo, and we have created like 10, 20, 30 and so on till 100.

Now let’s see the CSS and to create the circle, we used the border-radius property then we set the width and height as per our need. The background color is light gray in our case, and you can change it as you want.

.radialProgressBar {
border-radius: 50%;
-webkit-transform: translate(50%, 50%);
transform: translate(50%, 50%);
width: 100px;
height: 100px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: #ddd;
margin: 20px;
}

The overlay also has border-radius, but the width and height will be less as compare to .radialProgressBar because we need to show circle line instead of a solid circle. To hide the solid one, we also need to set the background color to white.

.radialProgressBar .overlay {
border-radius: 50%;
width: 80px;
height: 80px;
margin: auto;
background: #fff;
text-align: center;
padding-top: 30%;
}

Finally, we do need to create color full part of cirecutl and we can simple do this by using Gradient Generator

.progress-10 {
background-image: -webkit-linear-gradient(36deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);
background-image: linear-gradient(54deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);
}

That’s it Here is demo have a look.

See the Pen Radial Progress Bars by graycoatkev (@graycoatkev) on CodePen.

Hope you like it and find the good resource. Share and do comment if you like.

Author

Ashfaq Ahmed is a freelance creative front-end and WordPress developer. He develops modern, highly interactive websites with cutting edge technologies. In his spare time, he loves to do blogging and web experiments.

Website: http://reverie-tech.com/

Social Links: