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 barWidth.

Super simple and looks good too!