Making a blue score animated bar

Question

I have a circle score rating item in HTML, CSS (don't know their real name) basically the blue bar around the circle goes up to the point of the number.

I would like the bar to go around as an animation when the page loads. Currently I use PHP to output the number however this means the bar has no animation.

Please see image

A simple way I was thinking this could be done, is if PHP has any build in function to output up to a number, for example instead of outputting 3 it went 1,2,3 which could make the animation.

Code :

<div id="quad_rating_circle">
    <div class="c100 p<?php echo $score; ?> medium custom center dark fill">
        <span><?php echo $score;  ?></span>
        <div class="slice">
            <div class="bar"></div>
            <div class="fill"></div>
        </div>
    </div>
</div>

I have spent a good hour and haven't come up with anything, any help is greatly appreciated.

Thank you

Can you show us the rendered HTML and CSS for the score indicator? — Kyle, Nov 21 '16 at 07:26
I am assuming you are trying to load some js or css files and on each file load you want to increase the progress. — Mr_Green, Nov 21 '16 at 07:50

score 0 · Answer 1 · edited May 23 '17 at 11:53

0

This was basically already here:

CSS Progress Circle

You can easiley add an CSS animation and also work with CSS content

Like shown here: https://css-tricks.com/animating-the-content-property/

edited May 23 '17 at 11:53

Community

1
1

answered Nov 21 '16 at 11:56

CodeBrauer

2,690
1
26
51

Making a blue score animated bar

1 Answers1