A little bit more than a simple countup/countdown animation.
/*
:: Plugin File
src/js/sow.counter_animate.js
:: Plugin Init
*/ $.SOW.core.counter_animate.init();
// To use the callback, add to any counter:
data-count-callback="my_callback_function"
my_callback_function = function(el) {
// el = element that finished $(this)
// your code
}
Smarty Customers
Lightweight • Fast
<!-- box count -->
<div class="p--15 shadow-md rounded mb-4 mt-4 border-top border-secondary bw--2" data-aos="fade-up">
<div class="row col-border">
<!-- #1 -->
<div class="col-12 col-md-4 mt-2 mb-2">
<div class="text-center">
<h2 class="h5 font-weight-medium text-gray-500">SMARTY REVIEW</h2>
<div class="display-4 font-weight-medium text-warning mb-2">
<span data-toggle="count"
data-count-from="0"
data-count-to="5.0"
data-count-duration="2500"
data-count-decimals="1">0</span>/5.0
</div>
<span class="rating-5 fs--20 text-warning"></span>
</div>
</div>
<!-- mobile separator + spacer (between #1 and #2) -->
<div class="col-12 d-md-none d-lg-none d-xl-none">
<div class="border border-dashed bb-0 bl-0 br-0 h--1 ml-3 mr-3 mt-4 mb-4"></div>
</div>
<!-- #2 -->
<div class="col-12 col-md-4 mt-2 mb-2">
<div class="text-center">
<h2 class="h5 font-weight-medium text-success">
<!-- typed vendor -->
<span class="typed"
data-typed-string="PROJECTS|CUSTOMERS|WEBSITES"
data-typed-speed-forward="80"
data-typed-speed-back="40"
data-typed-back-delay="700"
data-typed-loop-times="infinite"
data-typed-smart-backspace="true"
data-typed-shuffle="false"
data-typed-cursor="|"></span>
</h2>
<div class="display-4 font-weight-medium text-success mb-2">
<span data-toggle="count"
data-count-decimals=""
data-count-from="0"
data-count-to="7300"
data-count-duration="1500">0</span>+
</div>
<p class="m-0 text-gray-400 lead">
Smarty Customers
</p>
</div>
</div>
<!-- mobile separator + spacer (between #2 and #3) -->
<div class="col-12 d-md-none d-lg-none d-xl-none">
<div class="border border-dashed bb-0 bl-0 br-0 h--1 ml-3 mr-3 mt-4 mb-4"></div>
</div>
<!-- #3 -->
<div class="col-12 col-md-4 mt-2 mb-2">
<div class="text-center">
<h2 class="h5 font-weight-medium text-gray-500">SATISFACTION</h2>
<div class="display-4 font-weight-medium text-primary mb-2">
<span data-toggle="count"
data-count-decimals=""
data-count-from="0"
data-count-to="100"
data-count-duration="2000">0</span>%
</div>
<p class="m-0 text-gray-400 lead">
Lightweight • Fast
</p>
</div>
</div>
</div>
</div>
<!-- /box count -->
Never been easier to start! Don't worry, you can upgdare or downlograde later!
$0.30 per hour
Admin Template Included
Modern & Trendy
Flexible and modular
Cuntinuously supported
Free updates included
$0.45 per hour
Admin Template Included
Modern & Trendy
Flexible and modular
Cuntinuously supported
Free updates included
Enterprise-grade solutions for high volume merchants, and large businesses. We offer a 10% discount on annual plans and a 20% discount on biennial plans.
(+01) 555-5555
<!-- Title -->
<div class="row justify-content-center mb--80">
<div class="col-12 col-md-6 text-center">
<span class="badge badge-pill badge-success badge-soft font-weight-light px-2 pt--6 pb--6">
EASY TO START
</span>
<h2 class="h1 mt-1 font-weight-normal">Select your package</h2>
<p class="lead">
Never been easier to start! Don't worry, you can upgdare or downlograde later!
</p>
</div>
</div>
<!-- /Title -->
<!-- Billing Switcher -->
<div class="d-flex justify-content-center p--15 mb--50">
<span class="text-gray-500">Monthly</span>
<label class="form-switch form-switch-pill form-switch-primary m-0 ml-3 mr-3">
<input type="checkbox" value="1"
data-count-target=".pricetable-count"
>
<i></i>
</label>
<span class="text-gray-500">Annual</span>
</div>
<!-- /Billing Switcher -->
<!-- Pricing Table -->
<div class="row align-items-center no-gutters">
<!-- col 1 -->
<div class="col-12 col-md-6 col-lg-5 col-xl-4 z-index-1" data-aos="fade-up" data-aos-delay="0">
<div class="card b-0 shadow-xs transition-hover-top transition-all-ease-500 rounded-xl mt-4 mb-4">
<!-- pricing : header -->
<div class="bg-primary-soft rounded-xl rounded-bottom-0 pt-3 pb-3">
<h3 class="text-center">
<span class="fs--13 badge badge-pill badge-soft badge-primary font-weight-light px-2 pt--6 pb--6">
START
</span>
</h3>
<div class="d-flex justify-content-center">
<span class="mb-0 mt-3 h3">$</span>
<span class="pricetable-count mb-0 display-3 font-weight-normal"
data-toggle="count"
data-count-decimals=""
data-count-from="0"
data-count-to="19"
data-count-duration="1500"
data-count-toggle='[
{"from":"0", "to":"19", "duration":800},
{"from":"19", "to":"150", "duration":800}
]'
>19</span>
<span class="mb-3 align-self-end h3 font-weight-light">/mo</span>
</div>
<p class="text-center text-muted font-weight-light">
$<span class="pricetable-count"
data-toggle="count"
data-count-from="0"
data-count-to="0.30"
data-count-duration="1500"
data-count-toggle='[
{"from":"0", "to":"0.30", "duration":1600},
{"from":"0.30", "to":"0.21", "duration":1600}
]'>0.30</span> per hour
</p>
</div>
<!-- pricing : svg shape -->
<div class="w-100 h--1 position-relative">
<svg class="mt--n70" width="100%" height="50" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" preserveAspectRatio="none">
<path style="opacity:0.15" d="M 1000 299 l 2 -279 c -155 -36 -310 135 -415 164 c -102.64 28.35 -149 -32 -232 -31 c -80 1 -142 53 -229 80 c -65.54 20.34 -101 15 -126 11.61 v 54.39 z"></path>
<path style="opacity:0.3" d="M 1000 286 l 2 -252 c -157 -43 -302 144 -405 178 c -101.11 33.38 -159 -47 -242 -46 c -80 1 -145.09 54.07 -229 87 c -65.21 25.59 -104.07 16.72 -126 10.61 v 22.39 z"></path>
<path style="opacity:1" d="M 1000 300 l 1 -230.29 c -217 -12.71 -300.47 129.15 -404 156.29 c -103 27 -174 -30 -257 -29 c -80 1 -130.09 37.07 -214 70 c -61.23 24 -108 15.61 -126 10.61 v 22.39 z"></path>
</svg>
</div>
<!-- pricing : body -->
<div class="p--60 pb--40">
<div class="d-flex mb-3">
<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
<i class="fi fi-check"></i>
</div>
<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
Admin Template Included
</p>
</div>
<div class="d-flex mb-3">
<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
<i class="fi fi-check"></i>
</div>
<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
Modern & Trendy
</p>
</div>
<div class="d-flex mb-3">
<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
<i class="fi fi-check"></i>
</div>
<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
Flexible and modular
</p>
</div>
<div class="d-flex mb-3">
<div class="badge badge-danger badge-soft badge-ico-sm rounded-circle float-start">
<i class="fi fi-close"></i>
</div>
<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
Cuntinuously supported
</p>
</div>
<div class="d-flex mb-3">
<div class="badge badge-danger badge-soft badge-ico-sm rounded-circle float-start">
<i class="fi fi-close"></i>
</div>
<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
Free updates included
</p>
</div>
</div>
<!-- pricing : button -->
<a href="#!" class="card-btn btn btn-block btn-lg btn-primary btn-soft btn-noshadow rounded-xl rounded-top-0">
Sign up now
</a>
</div>
</div>
<!-- col 2 -->
<div class="col-12 col-md-6 col-lg-5 col-xl-4 z-index-2 ml--n15 mr--n15 m-0-xs position-relative" data-aos="fade-up" data-aos-delay="200">
<div class="card b-0 shadow-xs transition-hover-top transition-all-ease-500 rounded-xl">
<!-- pricing : header -->
<div class="bg-success-soft rounded-xl rounded-bottom-0 pt-5 pb-5">
<h3 class="text-center">
<span class="fs--13 badge badge-pill badge-soft badge-success font-weight-light px-2 pt--6 pb--6">
BUSINESS
</span>
</h3>
<div class="d-flex justify-content-center">
<span class="mb-0 mt-3 h3">$</span>
<span class="mb-0 display-3 font-weight-normal">
<span class="pricetable-count mb-0 display-3 font-weight-normal"
data-toggle="count"
data-count-decimals=""
data-count-from="0"
data-count-to="29"
data-count-duration="1500"
data-count-toggle='[
{"from":"0", "to":"29", "duration":800},
{"from":"29", "to":"280", "duration":800}
]'
>29</span>
</span>
<span class="mb-3 align-self-end h3 font-weight-light">/mo</span>
</div>
<p class="text-center text-muted font-weight-light">
$<span class="pricetable-count"
data-toggle="count"
data-count-from="0"
data-count-to="0.45"
data-count-duration="1500"
data-count-toggle='[
{"from":"0", "to":"0.45", "duration":1600},
{"from":"0.45", "to":"0.38", "duration":1600}
]'>0.45</span> per hour
</p>
</div>
<!-- pricing : svg shape -->
<div class="w-100 h--1 position-relative">
<svg class="mt--n70" width="100%" height="50" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" preserveAspectRatio="none">
<path style="opacity:0.15" d="M 1000 299 l 2 -279 c -155 -36 -310 135 -415 164 c -102.64 28.35 -149 -32 -232 -31 c -80 1 -142 53 -229 80 c -65.54 20.34 -101 15 -126 11.61 v 54.39 z"></path>
<path style="opacity:0.3" d="M 1000 286 l 2 -252 c -157 -43 -302 144 -405 178 c -101.11 33.38 -159 -47 -242 -46 c -80 1 -145.09 54.07 -229 87 c -65.21 25.59 -104.07 16.72 -126 10.61 v 22.39 z"></path>
<path style="opacity:1" d="M 1000 300 l 1 -230.29 c -217 -12.71 -300.47 129.15 -404 156.29 c -103 27 -174 -30 -257 -29 c -80 1 -130.09 37.07 -214 70 c -61.23 24 -108 15.61 -126 10.61 v 22.39 z"></path>
</svg>
</div>
<!-- pricing : body -->
<div class="p--60 pb--40">
<div class="d-flex mb-3">
<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
<i class="fi fi-check"></i>
</div>
<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
Admin Template Included
</p>
</div>
<div class="d-flex mb-3">
<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
<i class="fi fi-check"></i>
</div>
<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
Modern & Trendy
</p>
</div>
<div class="d-flex mb-3">
<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
<i class="fi fi-check"></i>
</div>
<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
Flexible and modular
</p>
</div>
<div class="d-flex mb-3">
<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
<i class="fi fi-check"></i>
</div>
<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
Cuntinuously supported
</p>
</div>
<div class="d-flex mb-3">
<div class="badge badge-success badge-soft badge-ico-sm rounded-circle float-start">
<i class="fi fi-check"></i>
</div>
<p class="text-dark font-weight-light mb-0 pl--12 pr--12">
Free updates included
</p>
</div>
</div>
<!-- pricing : button -->
<a href="#!" class="card-btn btn btn-block btn-lg btn-success btn-soft btn-noshadow rounded-xl rounded-top-0">
Sign up now
</a>
</div>
</div>
<!-- col 3 -->
<div class="col-12 col-md-6 col-lg-5 col-xl-4 z-index-1" data-aos="fade-up">
<div class="card b-0 shadow-xs transition-hover-top transition-all-ease-500 rounded-xl mt-4 mb-4" data-aos-delay="600">
<!-- pricing : header -->
<div class="bg-warning-soft rounded-xl rounded-bottom-0 pt-5 pb-5">
<h3 class="text-center">
<span class="fs--13 badge badge-pill badge-soft badge-warning font-weight-light px-2 pt--6 pb--6">
ENTERPRISE
</span>
</h3>
<div class="d-flex justify-content-center">
<span class="fs--30 text-muted">
<!-- typed vendor -->
<span class="typed"
data-typed-source="#typed_pricing_enterprise"
data-typed-speed-forward="40"
data-typed-speed-back="30"
data-typed-back-delay="700"
data-typed-loop-times="infinite"
data-typed-smart-backspace="true"
data-typed-shuffle="false"
data-typed-cursor="|"></span>
<span id="typed_pricing_enterprise">
<span>CONTACT US</span>
<span class="hide">24/7 SUPPORT</span>
</span>
</span>
</div>
</div>
<!-- pricing : svg shape -->
<div class="w-100 h--1 position-relative">
<svg class="mt--n70" width="100%" height="50" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" preserveAspectRatio="none">
<path style="opacity:0.15" d="M 1000 299 l 2 -279 c -155 -36 -310 135 -415 164 c -102.64 28.35 -149 -32 -232 -31 c -80 1 -142 53 -229 80 c -65.54 20.34 -101 15 -126 11.61 v 54.39 z"></path>
<path style="opacity:0.3" d="M 1000 286 l 2 -252 c -157 -43 -302 144 -405 178 c -101.11 33.38 -159 -47 -242 -46 c -80 1 -145.09 54.07 -229 87 c -65.21 25.59 -104.07 16.72 -126 10.61 v 22.39 z"></path>
<path style="opacity:1" d="M 1000 300 l 1 -230.29 c -217 -12.71 -300.47 129.15 -404 156.29 c -103 27 -174 -30 -257 -29 c -80 1 -130.09 37.07 -214 70 c -61.23 24 -108 15.61 -126 10.61 v 22.39 z"></path>
</svg>
</div>
<!-- pricing : body -->
<div class="p--60 text-center">
<p class="lead pb--30 mb-0">
Enterprise-grade solutions for high volume merchants, and large businesses. We offer a 10% discount on annual plans and a 20% discount on biennial plans.
</p>
<a href="tel:+01-555-5555" class="text-muted fs--25">(+01) 555-5555</a>
</div>
<!-- pricing : button -->
<a href="tel:+01-555-5555" class="card-btn btn btn-block btn-lg btn-warning btn-soft btn-noshadow rounded-xl rounded-top-0">
Contact Us
</a>
</div>
</div>
</div>
<!-- /Pricing Table -->
<!-- counter : hide container on finish -->
<h1 data-toggle="count"
data-count-decimals=""
data-count-from="0"
data-count-to="1000"
data-count-duration="3000"
data-count-oncomplete='{"target":"#hide_me", "action":"hide"}'>0</h1>
<div id="hide_me" class="p--15 rounded bg-danger-soft">
I'm affraid I'll dissapear soon!
</div>
<!-- counter : show container on finish -->
<h1 data-toggle="count"
data-count-decimals=""
data-count-from="0"
data-count-to="1000"
data-count-duration="3000"
data-count-oncomplete='{"target":"#show_me", "action":"show"}'>0</h1>
<div id="show_me" class="p--15 rounded bg-primary-soft hide-force animate-fadein">
Hello my friend! I'm <b>Smarty</b>! How are you?
</div>
<!--
HINT: multiple targets/containers are supported, separated by comma:
"target":"#some_1, #some_2, .some-3, .etc"
There is only one action available (show|hide). So all containers are
hidden or shown.
-->
Simple math function, yet powerful for blocks like "cart". Will calculate the additional selected value to the base price intially set by main container ("main container" is considered the "price" container – please see the code).
To use it without animation, simply set:
data-count-duration="0"
<div class="d-inline-block p--15 shadow-md rounded">
<!--
main container : base price is set by data-count-to="..."
-->
<h3 class="text-danger text-center mt-3 mb-4">
<span class="text-muted">Total:</span>
<sup class="text-muted fs--20">$</sup>
<!--
base price used by all items on click
is set by data-count-to="..."
* to set "empty cart" on load (0.00), simply replace:
"29.00" with "0.00".
data-count-duration="0" = no animation
* because both: [-from and -to] are the same,
counter looks like is static.
Set data-count-from="0.00" to animate.
-->
<span class="cart-example"
data-toggle="count"
data-count-decimals="2"
data-count-from="29.00"
data-count-to="29.00"
data-count-duration="350">29.00</span>
</h3>
<!-- item -->
<label class="form-checkbox form-checkbox-primary d-block">
<input type="checkbox" name="checkbox"
data-count-target=".cart-example"
data-count-math="42.00">
<i></i> $42.00 Smarty Template
</label>
<!-- item -->
<label class="form-checkbox form-checkbox-primary d-block">
<input type="checkbox" name="checkbox"
data-count-target=".cart-example"
data-count-math="10.50">
<i></i> $10.50 Nintendo Joystick
</label>
<!-- item -->
<label class="form-checkbox form-checkbox-primary d-block">
<input type="checkbox" name="checkbox"
data-count-target=".cart-example"
data-count-math="10.50">
<i></i> $10.50 Smarty Game
</label>
<hr>
<button type="button" class="btn btn-danger btn-block">
<i class="fi fi-cart-1"></i>
ADD TO CART
</button>
</div>
<!--
Please note: the format of
data-count-toggle="..." is very important!
Must be exactly the same - each comma and each bracket!
In case the array/object is invalid, will
be ignored by the plugin (no error thrown)
-->
<!-- button trigger -->
<a href="#"
data-count-target=".count-by-link"
data-count-target-toggle='[
{"from":"0", "to":"29", "duration":2000},
{"from":"29", "to":"98", "duration":1500}
]'
class="btn btn-sm btn-primary btn-soft">
<span class="group-icon">
<span>Click Me</span>
<span>And Again <i class="fi fi-emoji-smile"></i></span>
</span>
</a>
<!-- counter 1 -->
<span class="count-by-link"
data-toggle="count"
data-count-decimals=""
data-count-from="0"
data-count-to="29"
data-count-duration="1500"
data-count-toggle='[
{"from":"0", "to":"29", "duration":1500},
{"from":"29", "to":"98", "duration":1500}
]'>29</span>
<!-- counter 2 (decimal forcing example) -->
<span class="count-by-link"
data-toggle="count"
data-count-decimals="2"
data-count-from="0"
data-count-to="49"
data-count-duration="1500"
data-count-toggle='[
{"from":"0", "to":"49", "duration":2000},
{"from":"49", "to":"128", "duration":2000}
]'>29</span>
<!--
counter N - add unlimited counters,
all having the same class
-->
</div>
<a href="#!"
data-count-target=".toggle-1way"
class="btn btn-warning">
<span class="group-icon">
<span>Please, toggle me</span>
<span>Thanks! One more time!</span>
</span>
</a>
<!--
Please note: the format of
data-count-toggle="..." is very important!
Must be exactly the same - each comma and each bracket!
In case the array/object is invalid, will
be ignored by the plugin (no error thrown)
-->
<span class="toggle-1way"
data-toggle="count"
data-count-decimals=""
data-count-from="0"
data-count-to="29"
data-count-duration="2000"
data-count-toggle='[
{"from":"29", "to":"98", "duration":2000}
]'>29</span>
<span class="toggle-1way"
data-toggle="count"
data-count-decimals="2"
data-count-from="0.00"
data-count-to="5.00"
data-count-duration="1000"
data-count-toggle='[
{"from":"0.00", "to":"5.00", "duration":1000}
]'>5.00</span>
<!--
Supported unlimited counters,
all having the same class
The params data-count-from="..."
data-count-to="..."
are used on load to count on page load.
-->