Create an animated bar with a blue score

Question

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

I would like the panel to move as an animation when the page loads. I am currently using PHP to output a number, however this means there is no animation in the bar.

Please see image

In a simple way, I thought it could be done if PHP had some kind of build function to output to a number, for example, instead of outputting 3, it was 1,2,3, which could make the animation.

The 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 spent a good hour and came up with nothing, any help is greatly appreciated.

thank

Answer 1

:

CSS

CSS, CSS content

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