CSS Circle animation to show percentage

Question

i have a circle and i am showing some text in the middle as demonstrated in the fiddle(JSFIDDLE http://jsfiddle.net/874jgh4v/2/) My requirement is this

I need to animate the outer white border for percentage for example if the percentage is 50% then i need to show that border only around half the circle
I need to show that percentage value on hower for example the text 50% should be shown only on hower preferably with some animation.

.wrapper{padding:30px;}

.circle{
    border-radius: 50%;
    background:#32a500;    
    box-shadow: 0px 0px 0px 16px  #f1f1f1;
    border: 16px solid #f9f9f9;
    width:220px;
    height:220px;
    box-sizing:border-box;
}

.circle:hover {
     background:red;    
}

<div class="wrapper">
    <div class="circle">
        <p>Total ROE's</p>
        <p>300</p>
        <p>70%</p>
     </div>
</div>

Any help would be appreciated! Also i would prefer to do this without external libraries , the percentages should support decimal points upto two points.

Plenty of examples online showing pure Css3 progress bars, ie: http://codepen.io/geedmo/pen/InFfd — Stumblor, Sep 18 '15 at 10:45
none of those works for dynamic inputs lets say i give 83% it wont work i need something that works dynamically — user1767986, Sep 18 '15 at 10:53
How about using SVG? http://codepen.io/JMChristensen/pen/Ablch — pawel, Sep 18 '15 at 11:03
works for me but in the example i see one thing first up its rounding off the percentage like lets say i give 33.32% its rounding and starting 33% which is not i wanted and another one how can i show some other text on hower instead of percentage — user1767986, Sep 18 '15 at 11:17
I'd recommend using an external library like e.g. [http://raphaeljs.com/](http://raphaeljs.com/). You will save time and you will learn a new thing that may help you in the future to save more time. — xpy, Sep 18 '15 at 11:35
I would agree with others that this is a job for SVG, not CSS. This is exactly the kind of thing that SVG is designed for. The only reason not to use SVG is if you need to support old browsers that don't have SVG support... but that's clearly not the case, as those browsers also won't have the CSS features you trying to use either. — Simba, Sep 18 '15 at 12:07
Got to agree with others that this is definitely a job for SVG. However, it is not impossible with CSS. You can have a look [here](http://stackoverflow.com/questions/31198304/count-down-timer-with-circular-progress-bar/31199281#31199281) for a sample that I prepared for a similar question. That animates automatically but uses JS and so you can control it to be based on input. — Harry, Sep 18 '15 at 14:11

Stumblor · Accepted Answer · 2015-09-18T11:33:50.457

Try this:

Html

<span class='Progress'>
    <div class="Bar">
        <div class="Outer">
            <div class="Fill"></div>
        </div>
        <div class="Draw"></div>
        <div class="Status"><span></span></div>
    </div>                
</span>

CSS

   .Progress {
        position: absolute;
        left: 25%;
        bottom: 30%;
    }

        .Progress .Bar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background-color: #E5E5E5;
            position: relative;
        }

        .Progress .Bar .Outer {
            content: "";
            position: absolute;
            border-radius: 50%;
            left: calc(50% - 35px);
            top: calc(50% - 35px);
            width: 70px;
            height: 70px;
            clip: rect(0, 70px, 70px, 35px);
        }

            .Bar .Outer .Fill {
                content: "";
                position: absolute;
                border-radius: 50%;
                left: calc(50% - 35px);
                top: calc(50% - 35px);
                width: 70px;
                height: 70px;
                clip: rect(0, 35px, 70px, 0);
                background: #00A0E3;
                transform: rotate(60deg);
            }

        .Progress .Bar .Draw {
            content: "";
            position: absolute;
            border-radius: 50%;
            left: calc(50% - 53.84615px/2);
            top: calc(50% - 53.84615px/2);
            width: 53.84615px;
            height: 53.84615px;
            background: #fff;
            text-align: center;
            display: table;
        }

        .Progress .Bar .Status {
            display: table-cell;
            vertical-align: middle;
            position: absolute;
            margin-left: -100px;
            margin-top: -10px;
            width: 200px;
            height: 200px;
            left: 50%;
            top: 50%;
            text-align: center;
        }

        .Progress .Bar .Status > span {
            font-size: 14px;
            font-weight: bold;
            color: #00A0E3;
        }

        .Progress .Bar.halfway {
            background-color: #00A0E3;
        }
            .Progress .Bar.halfway .Outer {
                clip: rect(0, 35px, 70px, 0);
            }
                .Progress .Bar.halfway .Outer .Fill {
                    clip: rect(0, 70px, 70px, 35px);
                    background: #E5E5E5;
                }

            .Progress .Bar.complete.halfway,
            .Progress .Bar.complete .Fill
            {
                background-color: #8cd64c !important;
            }

Javascript/JQuery:

$('document').ready(function() {

    var progress = function(perc) {

        perc = Math.round(perc * 100) / 100; // 2 decimal places

        var $bar = $('.Progress .Bar'), 
            $fill = $('.Progress .Bar .Outer .Fill'),
            $status = $('.Progress .Bar .Status span');

        $bar.removeClass("halfway").removeClass("complete");

        // outer bar
        if (perc >= 50) $bar.addClass("halfway");
        if (perc >= 100) $bar.addClass("complete");

        // progress bar
        var degrees = 360 * perc / 100;
        $fill.css({
          "WebkitTransform": 'rotate(' + degrees + 'deg)',
          "-moz-transform": 'rotate(' + degrees + 'deg)'
        });

      // status
        $status.html(perc);
    }

    // Test it!
    progress(10);
    setTimeout(function() { 
      progress(50); 
      setTimeout(function() { 
        progress(100); 
      }, 2000);
    }, 2000);

});

Show me the CodePen

CSS Circle animation to show percentage

1 Answers1