How to make a Javascript timer bar?

Question

I basically just want to know how to make this:

.timerwrapper {
  height: 60px;
  width: 100%;
  background: #484949;
  position: relative;
  margin: auto;
}

shrinking($item, $duration) {
  $duration = unit($duration, 's');

  {$item} {
    width: 0%;
    height: 60px;   
    position: absolute;
    bottom: 0;    
    animation: fillBar $duration ease-in infinite;
    background-image: linear-gradient(to right, #f00439, #f28d0d);  
  }  

  @keyframes fillBar {
      0% {
        width: 100%;
      }
      100% {
        width: 0%;
      }
  }
}

// Premier parametre : container class
// Second parametre : temps de l'animation en secondes
shrinking('.shrinking', 60);

I have taken the introductory JS tutorials on Codecademy and Treehouse. However I don't feel I know enough to understand what's going on in that Codepen. I would like to recreate what's there in regular CSS/Javascript, without Stylus.

Could someone point me in the direction of some good tutorials that would be relevant in creating this timer?

So basically I just want a bar that shrinks as a set time limit goes down.

Thanks.

Click the "eye" icon in the CSS pane, done. – Jonathan Apr 13 '15 at 16:59 — Jonathan, Apr 13 '15 at 16:59

score 1 · Accepted Answer · answered Apr 13 '15 at 17:22

its quite like they do it on codepen. they just get a calculated duration of the css animation.

you can just set you duration to a fixed value like 10s (10 seconds) and it would be the same.

animation-name: fillBar;
animation-duration: 10s;
animation-timing-function: ease-in;
animation-iteration-count: 1;
animation-direction: alternate;

also made you a fiddle. don't forget to prefix it. (prefix in fiddle included).

if you want to know more about animations and keyframes click here,

and here are some other good examples.

refs:

css animation.

animation-name

animation-duration

animation-timing-function

animation-iteration-count

animation-direction

greetings timmi

Wow thanks man, didn't know it could be done without JS. You're a champion! — rjtkoh, Apr 14 '15 at 05:10

How to make a Javascript timer bar?

1 Answers1