Circular Progress Bar With Plain HTML / CSS

Category: CSS & CSS3 , Loading | January 14, 2017
Author:tiagobalmeida
Views Total:128,184 views
Official Page:Go to website
Last Update:January 14, 2017
License:MIT

Preview:

Circular Progress Bar With Plain HTML / CSS

Description:

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.

See Also:

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">
  <span>10%</span>
  <div class="left-half-clipper">
    <div class="first50-bar"></div>
    <div class="value-bar"></div>
  </div>
</div>

You Might Be Interested In:


10 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

    Reply
    1. Ana Matus

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

      adding ‘over50’ class will do the job

      Reply
  2. dilip

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

    Reply
  3. Ortega

    Hello, it’s very good thank you, but i have a problem i want to use it without background-color only the line that fill if is full. if i delete your background color than after 50% ist the right side filled with a color. But i only want the line.

    Can u help me ?

    Reply

Leave a Reply