Countup

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

Example
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-4 text-center">
    <span class="fs-4 font-weight-medium" data-countup='{"count":36487}'>0</span>
    <h6>(Default) </h6>
  </div>
  <div class="col-6 col-md-4 col-xl mb-4 text-center">
    <span class="fs-4 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-4 text-center">
    <span class="fs-4 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-4 text-center">
    <span class="fs-4 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-4 text-center">
    <span class="fs-4 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-4 text-center">
    <span class="fs-4 font-weight-medium" data-countup='{"count":36487,"format":"comma","prefix":"$"}'>0</span>
    <h6>(Prefix) </h6>
  </div>
</div>