Circular Progress Bar With Plain HTML / CSS

Author: tiagobalmeida
Views Total: 116,796 views
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.

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

See also  Pure CSS/SASS Animated Tooltip Library - Ferret Tooltip

Leave a Reply

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