Preview

Counter vertical

Inflaction

9999 %

Rainfall

9999 mm

History

9999 years

Sales

+ 9999 %

Counter horizontal

Inflaction

9999

Rainfall

9999 mm

History

9999 years

Sales

+ 9999

Usage

<div class="counter counter-vertical counter-icon">
    <i class="im-cloud-rain text-md"></i>
    <div>
        <h3>Rainfall</h3>
        <div class="value">
            <span class="text-md" data-to="9999" data-speed="5000">9999</span>
            <span>mm</span>
        </div>
    </div>
</div>

<div class="counter counter-horizontal counter-icon">
    <i class="im-over-time text-md"></i>
    <div>
        <h3>History</h3>
        <div class="value">
            <span class="text-md" data-to="9999" data-speed="5000">9999</span>
            <span>years</span>
        </div>
    </div>
</div>

Installation

<script src='themekit/scripts/progress.js'></script>

Settings

Name Type Description
Initialization -- Add the class counter and the attribute data-to="123" to the target item.
Initialization Javascript Use the funciton $('#target').countTo({option:value, option:value, ...});
Manual initialization Attribute Add the attribute data-trigger="manual" to stop the auto execution of the component on page load. Use this features also when the component is placed inside a container.
Settings Data attribute
data-from="0" Starting number of the counter.
data-to="100" Finish number of the counter.
data-speed="5000" Counter progress speed, in milliseconds.
data-refresh-interval="500" Counter refresh interval for update the displayed value, in milliseconds.
data-unit="%" The text after the number.
data-separator="." Set the char inserted between the numbers.
Plugin documentation