Circular Progress Bar Using Plain HTML / CSS

Looking to create a circular progress bar with plain HTML/CSS? This is is a pure CSS approach to presenting percentage values in circular.

It is like a ring chart which partially filled the circles. Due to the only CSS, these circular are lightweight and also easy to implement.

All you need to copy a few lines of HTML code and add a CSS file. Thats It.

There are some Jquery version available on the internet but I don’t recommend you because it will increase your site load time and also these were developed with there were no CSS3

Now we have CSS3 which work well with most of the browsers. Also, provide you almost the same kind of animation which jQuery did.

How to use it:

The plugin comes with one core file CSS-circular-prog-bar.css which you can add in the header of the document. You can also copy the entire code from this file and place into exist stylesheet.

<link href="path/css-circular-prog-bar.css" rel="stylesheet">

You can add as many circular bars as you want. Let’s take a look at the first circular which has 10% value.

<div class="progress-circle p10">
   <span>10%</span>
   <div class="left-half-clipper">
      <div class="first50-bar"></div>
      <div class="value-bar"></div>
   </div>
</div>

There is a total of six circles in the demo and download file but you can create as many as you want. You can change their value in percentage and also can change the fill area accordingly by change class name number (p33).

<div class="progress-circle p33">
   <span>33%</span>
   <div class="left-half-clipper">
      <div class="first50-bar"></div>
      <div class="value-bar"></div>
   </div>
</div>

The CSS

You can find a complete CSS in the source file but here is how the main container of circle style looks like.

.progress-circle {
   font-size: 20px;
   margin: 20px;
   position: relative; /* so that children can be absolutely positioned */
   padding: 0;
   width: 5em;
   height: 5em;
   background-color: #F2E9E1; 
   border-radius: 50%;
   line-height: 5em;
   display:inline-block;
}

It uses the :after element to handle the fill area.

.progress-circle:after{
    border: none;
    position: absolute;
    top: 0.35em;
    left: 0.35em;
    text-align: center;
    display: block;
    border-radius: 50%;
    width: 4.3em;
    height: 4.3em;
    background-color: white;
    content: " ";
}

The text inside the circle control through using this CSS.

/* Text inside the control */
.progress-circle span {
    position: absolute;
    line-height: 5em;
    width: 5em;
    text-align: center;
    display: block;
    color: #53777A;
    z-index: 2;
}
.left-half-clipper { 
   /* a round circle */
   border-radius: 50%;
   width: 5em;
   height: 5em;
   position: absolute; /* needed for clipping */
   clip: rect(0, 5em, 5em, 2.5em); /* clips the whole left half*/ 
}