Create a beautiful Circular Percentage Bar using CSS

Category: CSS & CSS3 | September 2, 2021
Author: afuersch
Official Page: Go to website
Last Update: September 2, 2021
License: MIT

Create a beautiful Circular Percentage Bar using CSS


You must be creating a report or a page where you want your visitors to show the percentage of his progress report. And, you were searching for a way of creating a circular percentage bar using CSS.

So your search ends here. Here in this article, I am going to share with you a CSS library called ‘circle.css’ that will show the progress bar with a percentage in a circular style.

How to use Circular percentage bar CSS?

Step 1: Include circle.css file in your document’s under <head></head> tag. see example.

<link rel="stylesheet" href="css/circle.css">

Step 2: Create HTML elements like this.

<div class="c100 p50 big dark">
                        <div class="slice">
                            <div class="bar"></div>
                            <div class="fill"></div>
Circular Percentage Bar using CSS


There are few options available to increase or decrease the size of the progress bar and few other options available to change the color of the circular progress bar by classes like this:

<!--Size Options -->

<div class="c100 p50 big"> <!-- big size -->
<div class="c100 p50 small"> <!-- small size -->

<!--Color Options -->

<div class="c100 p50 green"> <!-- Green Color -->
<div class="c100 p50 orange"> <!-- Orange Color -->
<div class="c100 p50 dark"> <!-- Dark Color -->