Count up

These modular elements can be readily used and customized in every layout across pages.

For more detail see, CountUP Documentation

Example

CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.

0
(Default)
0
(Duration 10s)
0
(Comma)
0
(Space)
0
(suffix)
0
(Prefix)
<div class="row">
  <div class="col-6 col-md-4 col-xl mb-2 mb-lg-0 text-center">
    <span class="fs-3 fw-medium" data-countup='{"endValue":36487}'>0</span>
    <h6>(Default) </h6>
  </div>
  <div class="col-6 col-md-4 col-xl mb-2 mb-lg-0 text-center">
    <span class="fs-3 fw-medium" data-countup='{"endValue":23542,"duration":10}'>0</span>
    <h6>(Duration 10s) </h6>
  </div>
  <div class="col-6 col-md-4 col-xl mb-2 mb-lg-0 text-center">
    <span class="fs-3 fw-medium" data-countup='{"endValue":36487,"separator":""}'>0</span>
    <h6>(Comma) </h6>
  </div>
  <div class="col-6 col-md-4 col-xl mb-2 mb-lg-0 text-center">
    <span class="fs-3 fw-medium" data-countup='{"endValue":36487,"separator":" "}'>0</span>
    <h6>(Space) </h6>
  </div>
  <div class="col-6 col-md-4 col-xl mb-2 mb-lg-0 text-center">
    <span class="fs-3 fw-medium" data-countup='{"endValue":36.487,"decimalPlaces":2,"suffix":"k"}'>0</span>
    <h6>(suffix) </h6>
  </div>
  <div class="col-6 col-md-4 col-xl mb-2 mb-lg-0 text-center">
    <span class="fs-3 fw-medium" data-countup='{"endValue":36487,"prefix":"$"}'>0</span>
    <h6>(Prefix)</h6>
  </div>
</div>