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>