Counters

Animates a counter up to a given value. Can also count in reverse.

About the Plugin

WebsiteGitHubnpm

Counters are handled by the countup.js library.

Our script provides a wrapper to the countup.js library allowing options to be specified as data attributes on counter elements.

Our wrapper works in conjunction with scrollMonitor to begin counting when the element is scrolled into view.

Despite its name, CountUp can count in either direction, depending on the parameters passed in.

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

  1. Load the initializer code in index.js

    Countup is distributed as a CommonJS module, and must be embedded in theme.js. The import statement to embed the library is in js/mrare/countup.js.

    • Declare the following import statement in js/mrare/index.js. This ensures that the initializer code and CountUp library is included in the theme.js bundle.

      import mrCountup from './countup';

    • Ensure the following line appears in the export object:

      export {
mrCountup,
};

Basic Usage

Counters are initialized by data-attributes on page load.

Add the data-countup attribute to initialize the element as a counter.

By default, the counter will use the element's text and count up to that value from zero. The text is parsed by the javascript parseFloat function, so you may use a decimal or integer.

<span data-countup>1234</span>

Advanced Usage

Counters are initialized by data-attributes on page load.

Add the data-countup attribute to initialize the element as a counter.

<span data-countup data-start="0" data-end="100" data-duration="4" data-suffix="%">0%</span>
Data attribute Default Usage
data-start 0 Value to start counting from. May be decimal value.
data-end Text of element Value to end counting at. May be decimal value.
data-duration 2.5 Length of time (seconds) to animate over
data-grouping false Whether to display a comma in thousands eg. 1,234
data-separator , Character to use as a separator in thousands
data-decimal-character . Character to use as a decimal point
data-decimal-places 0 How many places to show after the decimal point
data-prefix "" Text to add before the count
data-suffix "" Text to add after the count eg. "%"
data-easing true To disable easing, use "false"