Circular percent progress bar

by

Considering the shape of the progress bar (rounded end/start) I would suggest using SVG.

DEMO: Radial progress bar

Radial progress bar

In the following example, the progress is animated with the stroke-dasarray attribute and the % numbers are incremented with jQuery:

var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 5000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});
body{text-align:center;font-family: 'Open Sans', sans-serif;}
svg{width:25%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="animated" viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="251.2,0"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80">
    <animate attributeName="stroke-dasharray" from="0,251.2" to="251.2,0" dur="5s"/>           
  </path>
  <text id="count" x="50" y="50" text-anchor="middle" dy="7" font-size="20">100%</text>
</svg>

Unfortunatly IE doesn’t support svg SMIL animations. To achieve the same result with IE support, you can use a library like snap.svg and animate the stroke-dasharray attribute with JS :

var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 5000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});

var s = Snap('#animated');
var progress = s.select('#progress');

progress.attr({strokeDasharray: '0, 251.2'});
Snap.animate(0,251.2, function( value ) {
    progress.attr({ 'stroke-dasharray':value+',251.2'});
}, 5000);
body{text-align:center;font-family:sans-serif;}
svg{width:25%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg id="svg" viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="1,250.2"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"/>
  <text x="50" y="50" text-anchor="middle" dy="7" font-size="20">1%</text>
</svg>
<svg viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="125.6,125.6"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"/>
  <text x="50" y="50" text-anchor="middle" dy="7" font-size="20">50%</text>
</svg>

<svg id="animated" viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path id="progress" stroke-linecap="round" stroke-width="5" stroke="#fff" fill="none"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80">
  </path>
  <text id="count" x="50" y="50" text-anchor="middle" dy="7" font-size="20">100%</text>
</svg>

More Related Contents:

  1. How to create a circle with links on border side
  2. html/css hexagon with image inside
  3. Responsive CSS Trapezoid Shape
  4. Creating a ‘New’ spiky label with 24 or above point burst
  5. div with triangle at the bottom with background image
  6. How do I create a teardrop in HTML?
  7. How to make double border on left only with thick outside and thin inside [duplicate]
  8. Transparent half circle cut out of a div
  9. Can I create a div with a Curved bottom?
  10. How to make this arrow in CSS only?
  11. Shape with a slanted side (responsive)
  12. CSS3 Transform Skew One Side
  13. How to style SVG with external CSS?
  14. How to make a curved edge hexagon by using CSS
  15. Generate repeating hexagonal pattern with CSS3
  16. How to create a curve between two gradient using CSS?
  17. Hexagon shape with a border/outline
  18. How to create a transparent triangle with border using CSS?
  19. CSS Speech Bubble with Box Shadow
  20. Center Triangle at Bottom of Div
  21. CSS box shadow around a custom shape?
  22. Making an svg image object clickable with onclick, avoiding absolute positioning
  23. How to change SVG color when it is an encoded CSS background image?
  24. How to get rid of extra space below svg in div element
  25. Title with bottom border smaller than width
  26. Css hover sometimes doesn’t work on svg paths
  27. SVG LinearGradient hidden if svg is hidden in seperate class
  28. Internet Explorer and clip-path
  29. svg background image position is always centered in internet explorer, despite background-position: left center;
  30. Create wavy borders in CSS for top and bottom borders

Leave a Comment