JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<svg class="pos-spinCounter">
    <circle r="12" cx="13" cy="13"/>
    <text x="13" y="-8">100</text>
</svg>
 
<button>Hello!</button>

CSS

svg.pos-spinCounter {
    padding: 0;
    width: 26px;
    height: 26px;
    transform: rotate(-90deg);
}
svg.pos-spinCounter circle{
    transition: 300ms;
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 75;
    stroke-dashoffset: 75;
    stroke: red;
}
svg.pos-spinCounter text{
    transform: rotate(90deg);
    width: 100%;
    text-align: center;
    x: '13';
    y: '-8';
    font-family: open sans;
    font-size: 14px;
    text-anchor: middle;
}
svg.pos-spinCounter.animation circle {
    stroke-dashoffset: 0;
    transition: 3000ms;
}

JavaScript

$('button').click(function() {
    $('svg').toggleClass('animation');
});