Auto Counters
Autocounters can bring more attention to stats on a page by making them count from 0 to a target number when it comes into view. This can be accomplished on any page without any additional Javascript, just a single class countme and two configuration options.
Via Data Attributes
On any element, after adding the class countme you must also add a data-number attribute. This accepts any integer and will alter the content inside of the element to count from 0 to the target number in 1.5 seconds. If you would like commas added to your numbers larger than 999, set the data-comma attribute to true. That's it. Best practice would be to put your target number inside the element as well, just in case Javascript fails, the correct number will still be displayed.
Via Javascript
If you would like to adjust the timing of the counter, you can call the initiateAutoCounter(element,number,time) function in javascript yourself. It accepts three arguments.
- Element: The element must be a jQuery selected element.
- Number: The target value you want to count to.
- Time: The number of milliseconds you want the animation to take.
Circle Stat Usage
Counters can easily be placed inside circle stat elements, however, if the counter and multiple lines of text will be placed inside the elemnent, you must use the circle-stat-text class because both items will attempt to resize the circle and cause errors.