Pure CSS Radial Progress Bar

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

In this post, we will create Pure CSS Radial Progress Bar but before we go ahead, 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.

Pure CSS Radial Progress Bar

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *