Counter

The counter will start once element in view or scrolls past the element.

Example # Normal counter

SGD 0

HTML
<p>SGD <span data-behavior-is="counter-cmp" data-end="200">0</span></p>

Example # In viewport

SGD 0

Counter will start when element in view, here we are using Element in viewport component.

For more information of element in viewport component, please click here.

<div data-behavior-is="element-inview">SGD <span data-behavior-is="counter-cmp" data-end="200">0</span></div>

Example # Begin value

SGD 0

Add the data-begin attribute

<span class="bs-counter" data-behavior-is="counter-cmp" data-begin="200" data-end="300">0</span>

Example # Decimal digits

SGD 0

Add the data-decimal-digits attribute. The default value is "0" when both data-end and data-begin are whole numbers, or "2" otherwise.

<span class="bs-counter" data-behavior-is="counter-cmp" data-decimal-digits="2" data-end="20.7">0</span>

Example # Duration of animation

SGD 0

Add the data-duration-secs attribute. The default value is "2" seconds.

<span class="bs-counter" data-behavior-is="counter-cmp" data-duration-secs="20" data-end="200">0</span>