JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div class="timer-container">
    
    <div class="number-container">
        <div class="number"></div>
    </div>
    <div class="number-container">
        <div class="number"></div>
    </div>
    <div class="number-container">
        <div class="number"></div>
    </div>
    <div class="number-container">
        <div class="number"></div>
    </div>

</div>

CSS

.timer-container {
    margin: 0 auto;
    width: 80%;
}

.number-container {
    width: 25%;
    float: left;
}

.number {
    width: 100%;
    height: 0;
    padding: 0 0 100% 0;
    background-image: url(https://www.kitkat.ca/img/numbers/0.gif);
    background-size: auto 100%;
    background-position: 0 0;
    overflow: hidden;
}

JavaScript

var number = $('.number');
var percent = 0;
var numFrames = 14;
var frames = (100 / numFrames);
var move = function(){
    percent += frames; 
    number.css({ 'background-position' : percent + '% 0px' });
    setTimeout(move, (1000/frames));
};
move();