Count up
Simple
Explore CountUp.js for additional examples. For more examples, visit the official CountUp.js website.
$
0
Income
0
Projects
0
%Achievement
<div class="simple-counter">
<div class="simple">
<div>
<span>$</span>
<p class="counter" data-count="150">0</p>
</div>
<p><i class="ti ti-arrow-narrow-up text-success"></i>Income</p>
</div>
<div class="simple">
<div class="counter" data-count="85">0</div>
<p><i class="ti ti-arrow-narrow-down text-danger"></i>Projects</p>
</div>
<div class="simple">
<div>
<p class="counter" data-count="60">0</p>
<span>%</span>
</div>
<p><i class="ti ti-arrow-narrow-up text-success"></i>Achievement</p>
</div>
</div>
Customized
You can enhance CountUp's appearance and behavior by integrating our extended Bootstrap classes.
$
0
Respected Companies
0
Analytical Reports
0
%Protected Payments
<div class="customized-counter mt-4">
<div class="customized">
<i class="ti ti-apps"></i>
<div class="d-flex align-items-center">
<span>$</span>
<p class="counter f-w-500 f-s-30 text-dark" data-count="500">0</p>
</div>
<p>Respected Companies</p>
</div>
<div class="customized">
<i class="ti ti-report-analytics"></i>
<div class="counter" data-count="75">0</div>
<p>Analytical Reports</p>
</div>
<div class="customized">
<i class="ti ti-brand-paypal"></i>
<div class="d-flex align-items-center">
<p class="counter f-w-500 f-s-30 text-dark" data-count="40">0</p>
<span>%</span>
</div>
<p>Protected Payments</p>
</div>
</div>
Update Data
For guidance on resetting a CountUp instance with a new value and configuration to dynamically update the displayed value, consult the official documentation of CountUp.js for detailed API usage and examples.
$
0
Income
0
Projects
0
%Achievement
<div class="simple-counter">
<div class="simple">
<div>
<span>$</span>
<p class="counter" data-count="150">0</p>
</div>
<p><i class="ti ti-arrow-narrow-up text-success"></i>Income</p>
</div>
<div class="simple">
<div class="counter" data-count="85">0</div>
<p><i class="ti ti-arrow-narrow-down text-danger"></i>Projects</p>
</div>
<div class="simple">
<div>
<p class="counter" data-count="60">0</p>
<span>%</span>
</div>
<p><i class="ti ti-arrow-narrow-up text-success"></i>Achievement</p>
</div>
<div>
<button class="btn btn-light-primary" id="startCounter">Update Data</button>
</div>
</div>
Under Tab Sections
Experience a demo featuring CountUp, triggered only when it enters the viewport within a tab container.
$
0
Income
0%
Projects
0
%Achievement
0
Income
0
Projects
0
Achievement
0
Income
0
Projects
0
Achievement
<div class="simple-counter">
<ul class="nav nav-tabs app-tabs-primary" id="Basic" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="one-tab" data-bs-toggle="tab"
data-bs-target="#tab-one" type="button" role="tab" aria-controls="tab-one"
aria-selected="true">Tab-1</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="two-tab" data-bs-toggle="tab" data-bs-target="#tab-two"
type="button" role="tab" aria-controls="tab-two" aria-selected="false">Tab-2</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="three-tab" data-bs-toggle="tab" data-bs-target="#tab-three"
type="button" role="tab" aria-controls="tab-three" aria-selected="false">Tab-3</button>
</li>
</ul>
<div class="tab-content" id="BasicContent">
<div class="tab-pane fade show active" id="tab-one" role="tabpanel"
aria-labelledby="one-tab" tabindex="0">
...
</div>
<div class="tab-pane fade" id="tab-two" role="tabpanel" aria-labelledby="two-tab"
tabindex="0">
...
</div>
<div class="tab-pane fade" id="tab-three" role="tabpanel" aria-labelledby="three-tab"
tabindex="0">
...
</div>
</div>
</div>
Use
<script src="assets/js/countup.js"></script> Initiation
- Including CountUp in your project involves adding the HTML attribute
to the CountUp element, accompanied by the target counting value set using. For a comprehensive range of options, including loop parameters and more, please review the detailed choices below. - You have the ability to programmatically control CountUp instances. To explore additional options for Smooth Scroll, refer to the official plugin site for comprehensive information.