Count up

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

Example

Count up component will start counting after an element with data-countup attribute become visible in the viewport.

0
(Default)
0
(Duration 10s)
0
(Comma)
0
(Space)
0
(Alphanumeric)
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 font-weight-medium" data-countup='{"count":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 font-weight-medium" data-countup='{"count":23542,"duration":10000}'>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 font-weight-medium" data-countup='{"count":36487,"format":"comma"}'>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 font-weight-medium" data-countup='{"count":36487,"format":"space"}'>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 font-weight-medium" data-countup='{"count":36487,"format":"alphanumeric"}'>0</span>
    <h6>(Alphanumeric) </h6>
  </div>
  <div class="col-6 col-md-4 col-xl mb-2 mb-lg-0 text-center">
    <span class="fs-3 font-weight-medium" data-countup='{"count":36487,"format":"comma","prefix":"$"}'>0</span>
    <h6>(Prefix) </h6>
  </div>
</div>

Thank you for creating with Reign © 2019| v4.0.1

Made withby Themewagon