In other words, it gives numbers a nice animated look. This especially cool for livening up dashboards, or other information-rich pages.
The only downside to the library was its actual usage. It looked something like this:
The old way, in CoffeeScript:
The old HTML markup:
new countUp... ten or more times in my Angular controller got old, fast.
Like any good programmer, I did a bunch of Googling to figure out the solution. After a solid 5 minutes, I was suprised to see that there wasn’t an Angular directive for this floating around. So, I ended up taking things into my own hands.
The solution, in all its CoffeeScript glory:
And its vanilla JS counterpart (if you’re into that sort of thing):
The usage is as follows:
Note that you need the attribute
ng-model, as well as an
count-up attribute is self explanatory, while the
ng-model is the numerical value to apply the countUp effect to. The
id is necessary for countUp itself- it doesn’t matter what the name of the
Optionally, you can configure the number of decimals and the animation length (in seconds) like so:
This directive is a work in progress- there are probably a ton of optimzations that can be made. Let me know if you have suggestions, and hopefully this helps out somebody!