Counter

Counter is a lightweight plugin that counts up to a targeted number.

Examples

Basically, you can toggle the milestone counter on any element you want. The advantage is that you can style it very easily without being constraint of pre-defined styles.

<span class="counter" data-from="0" data-to="1000" data-speed="1500" data-refresh-interval="100"></span>

Heading

<span class="h3 text-primary counter" data-from="0" data-to="1000" data-speed="1500" data-refresh-interval="100"></span>

Button

<button type="button" class="btn btn-primary">
    <span class="counter" data-from="0" data-to="1000" data-speed="1500" data-refresh-interval="100"></span> Downloads
</button>

Mix

%
Happy clients
x7
Customer support
<div class="row">
    <div class="col-md-6 mb-5 mb-lg-0">
        <div class="text-center">
            <div class="h1 text-primary">
                <span class="counter" data-from="0" data-to="97" data-speed="3000" data-refresh-interval="100"></span>
                <span class="counter-extra">%</span>
            </div>
            <h6 class="text-capitalize">Happy clients</h6>
        </div>
    </div>

    <div class="col-md-6 mb-5 mb-lg-0">
        <div class="text-center">
            <div class="h1 text-primary">
                <span class="counter" data-from="0" data-to="365" data-speed="3000" data-refresh-interval="100"></span>
                <span class="counter-extra">x7</span>
            </div>
            <h6 class="text-capitalize">Customer support</h6>
        </div>
    </div>
</div>
Summary