TimerBar JS brings a visual and minimalist way to put a timer in your website. It is simple, lightweight and easy to use.
const fancyTimerBar = new TimerBar(myElement, myOptions);
fancyTimerBar.trigger();
You might easily customize your TimerBar through its options.
It can either be passed in the constructor like this:
const fancyTimerBar = new TimerBar(myElement, {
mode: "fill",
anchor: "bottom",
height: "50px",
width: "10px",
});
Or after, accessing the properties directly:
const fancyTimerBar = new TimerBar(myElement);
fancyTimerBar.mode = "fill";
fancyTimerBar.anchor = "bottom";
fancyTimerBar.height = "50px";
fancyTimerBar.width = "10px";
-
width
- Sets the width of the TimerBar. It comports all CSS units, likepx
andem
. Integer values like100
will not work. -
height
- Works in the same way as thewidth
property. -
barBackground
- Sets the color of the animated bar. It is supported any CSS background definitions such as plain colors, gradients and images. -
background
- Change the background of the container likewise thebarBackground
option.
-
mode
- Defines the main behavior of the TimerBar. It can be:empty
- Starts filled and empties out.fill
- Starts empty and get filled.
-
anchor
- Sets the anchor point of the animation, being possible the values:left
,right
,top
andbottom
For better understanding: A TimerBar with
left
anchor empties out to the left and gets filled from the left.Notice: when the anchor is
left
orright
, the bar will have its width animated. If it istop
orbottom
, its height will be instead. -
duration
- Determine, in milisseconds, how long the animation will take. -
delay
- Delays the animation start and the finish event. To define the delay, it is necessary to pass an array whose first index sets theanimationStartDelay
and the second sets thefinishDelay
.Example:
{delay: [200, 400]}
- the animation starts after 200ms and the finish event is triggered 400ms later. -
timingFunction
- Set the timing function which the animation will operate on. All CSS timing-function types are supported.
{
triggered: function() {
console.log("I have been triggered!");
}
}
triggered
- Do something when the TimerBar starts to act, regardless of the delay.finished
- Do something when everything is done, even the finish delay.started
- [future implementation] - Do something when the animation starts, considering the delay.ended
- [future implementation] - Do something when the animation ends.paused
- [future implementation]resumed
- [future implementation]reseted
- [future implementation]
Notice: In the callback functions, the
this
keyword will be binded to the TimerBar instance. It's handy to usethis.el
to access the DOM element of it or even manipulate its options. Eg.:this.background = "#000"
.
Option | Value |
---|---|
width | "100%" |
height | "20px" |
barBackground | "#ccc" |
background | "#007bff" |
mode | "empty" |
anchor | "left" |
duration | 2000 |
delay | [0, 0] |
timingFunction | "ease" |
trigger()
- Starts the show!reset()
- Redefine the TimerBar to its initial state.reverse()
- Plays the contrary animation.pause()
- [future implementation]resume()
- [future implementation]