Recently I have been writing many dashboard-style applications that call an API on a timer to refresh data points.
It is easy enough to throw a loading class on an element to display a spinner, but I thought I would see how hard it would be to create my own custom countdown animation.
Turns out, it is actually very easy.
The meat and potatoes here is the
timerTick method that gets called ever 1/10th of a second. This method decrements the the
timer value by .1 and recalculates the percentage
barWidth value by dividing
timer by the
waitTime and mutliplying that by 100. When
timer is less than or equal to 0 the
loadData method is called where data would be loaded and the process is started again.
In the template, the bar is generated by two divs. The slider wrap basically just contains a light gray background to contrast the slider bar. The width is controlled by binding the width style the the
Super simple and looks good too!