how do i link a CSS animation to the javascript date object

Question

i have the following CSS animation that mimics a loading bar and lasts 59 seconds, and then resets. i am also pulling in the real time from javascript's date module.

how do i link the animation to the module so that if for example the second count is 48, the animation is 48/60 done.

so i want to hook up "second" in JS to "width" in the animation.

CSS

    .square {
            width: 30px;
            height: 3px;
            background: red;
            position: relative;
            animation: colors 59s;
            -webkit-animation: colors 59s;
            animation-iteration-count: infinite;
            -webkit-animation-iteration-count: infinite;
            top: 0px;
            margin-left:-30px;
            }

        @keyframes colors {
            0% {width: 30px;}
            99% {width: 100%} 
        }

        @-webkit-keyframes colors {
            0% {width: 30px;}
            99% {width: 100%} 


}

---

JS

function currentTime() {
    var today = new Date();
    console.log(today);
    hour = today.getHours();
    minute = today.getMinutes();
    second = today.getSeconds();
    minute = formatTime(minute);
    second = formatTime(second);

    text.innerHTML = hour + "." + minute + "." + second;
    console.log(minute);

}

Answer 1

You could use Jquery UI to make a progress bar, and run a loop that delays x miliseconds before restarting however many times.

Link: http://jqueryui.com/progressbar/

Or take a look here for a variety of ways: how to use jquery ui progress bar?