Circular Progress Bar With Plain HTML / CSS

Category: CSS & CSS3 , Loading | January 14, 2017
Author: jumpifzero
Views Total: 12,146
Official Page: Go to website
Last Update: January 14, 2017
License: MIT


Circular Progress Bar With Plain HTML / CSS


A pure Html and CSS approach to presenting percentage values in partially filled circles just like the ring chart. Powered by CSS3 transform and clip properties.

How to use it:

Place the core style sheet css-circular-prog-bar.css in the header of the document and we’re ready to go.

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

Create a circular progress bar (10%) following the markup structure like this:

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

You Might Be Interested In:

5 thoughts on “Circular Progress Bar With Plain HTML / CSS

  1. Felipe Fonseca

    How i make progressive bar with more of 50%? It’s invert the colors

    1. Ana Matus

      you need to add ‘over50’ class when >50%..
      like this:

      adding ‘over50’ class will do the job

  2. dilip

    Thanks for sharing great articular, how can i reduce size of


Leave a Reply