Overview
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.
For more info see the official siteand the Github repository.
Usage
CountUp.js's style and script bundles are separate from our global bundle and required to be included and initialized manually on related pages.
<script src="assets/plugins/global/plugins.bundle.js"></script>Initialization
-
CountUp's Javascript is globally initialized with our
KTAppwrapper defined insrc/js/components/app.jswithin theinitCountUpandinitCountUpTabsfunctions. -
To include CountUp into your project, you need to include a HTML attribute
data-kt-countup="true"within the CountUp element along with the value that it will be counting to withdata-kt-countup-value. For more options available, such asloopparameters and more, please refer to the options below. - CountUp instances can also be controlled programmatically. For more information on Smooth Scroll's other options, please refer to the official plugin site.
Markup Reference
CountUp uses HTML attributes to set specific configurations. Here are some references for each below. For complete list of options, please refer to the official documentation.
HTML Attribute references
| Name | Type | Description |
|---|---|---|
data-kt-countup
|
mandatory
|
Enables the current element as the CountUp wrapper component. Accepts true or false values.
|
data-kt-countup-value
|
mandatory
|
Defines the number that CountUp will count to. Accepts any integer values. |
data-kt-countup-start-val
|
optional
|
Defines the starting number for CountUp. Accepts any integer values. |
data-kt-countup-duration
|
optional
|
Defines the duration it takes to animate the numbers from start to end in ms. Accepts positive integer values. |
data-kt-countup-separator
|
optional
|
Defines the grouping separator(e.g: ','). |
data-kt-countup-decimal-places
|
optional
|
Defines the numeric decimal places. Accepts positive integer values. |
data-kt-countup-prefix
|
optional
|
Defines the prefix character that will appear before CountUp (e.g. "$"). Accepts string values. |
data-kt-countup-suffix
|
optional
|
Defines the suffix character that will appear after CountUp (e.g. "+"). Accepts string values. |
Basic
Visit CountUp.js's official website for more examples.
0
Earnings
0
Projects
0
Success Rate
<div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
<!--begin::Number-->
<div class="d-flex align-items-center">
<span class="svg-icon fs-3 text-success me-2">
...
</span>
<div class="fs-2 fw-bold" data-kt-countup="true" data-kt-countup-value="4500" data-kt-countup-prefix="$">0</div>
</div>
<!--end::Number-->
<!--begin::Label-->
<div class="fw-semibold fs-6 ">Earnings</div>
<!--end::Label-->
</div>Custom
CountUp can be customized with any of our extended Bootstrap classes.
0
0
0
<div class="d-flex flex-wrap flex-center justify-content-lg-between mx-auto w-xl-900px">
<!--begin::Item-->
<div
class="d-flex flex-column flex-center h-200px w-200px h-lg-250px w-lg-250px m-3 bg-light rounded-circle">
<!--begin::Symbol-->
<span class="fs-4x text-primary mb-3">
...
</span>
<!--end::Symbol-->
<!--begin::Info-->
<div class="mb-0">
<!--begin::Value-->
<div class="fs-lg-2hx fs-2x fw-bold text-white d-flex flex-center">
<div class="min-w-70px" data-kt-countup="true" data-kt-countup-value="700" data-kt-countup-suffix="+">0</div>
</div>
<!--end::Value-->
<!--begin::Label-->
<span class="text-gray-600 fw-semibold fs-5 lh-0">
Known Companies
</span>
<!--end::Label-->
</div>
<!--end::Info-->
</div>
<!--end::Item-->
...
</div>Update Values
Visit CountUp.js's official docs to learn the plugin API.
This example shows how to reinitialize CountUp instance with a new value and settings in order to update the value.
0
Earnings
0
Projects
0
Success Rate
<div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
<!--begin::Number-->
<div class="d-flex align-items-center">
<span class="svg-icon fs-3 text-success me-2">
...
</span>
<div
class="fs-2 fw-bold"
id="kt_countup_1"
data-kt-countup="true"
data-kt-countup-value="4500"
data-kt-countup-prefix="$"
>0</div>
</div>
<!--end::Number-->
<!--begin::Label-->
<div class="fw-semibold fs-6 ">Earnings</div>
<!--end::Label-->
</div>var button = document.querySelector("#kt_countup_update");
const count1 = new countUp.CountUp("kt_countup_1");
const count2 = new countUp.CountUp("kt_countup_2");
const count3 = new countUp.CountUp("kt_countup_3");
button.addEventListener("click", function() {
count1.update(1000);
count2.update(200);
count3.update(300);
});Within Tabs
Here's a demo where CountUp will only start when visible within a tab container. Add
data-kt-countup-tabs="true" next to the data-bs-toggle="tab" HTML attribute to define that the tab content has a CountUp element.
Example tab content 1
0
Earnings
0
Projects
0
Success Rate
Example tab content 2
0
Earnings
0
Projects
0
Success Rate
Example tab content 3
0
Earnings
0
Projects
0
Success Rate
<!--begin::Tabs-->
<ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" data-kt-countup-tabs="true" href="#kt_docs_countup_tab_1">Tab 1</a>
</li>
...
</ul>
<!--end::Tabs-->
<!--begin::Tab content-->
<div class="tab-content">
<div id="kt_docs_countup_tab_1" class="tab-pane fade active show" role="tabpanel">
<div class="fw-bold mb-5">Example tab content 1</div>
<div class="d-flex">
<!--begin::Stat-->
<div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
<!--begin::Number-->
<div class="d-flex align-items-center">
<span class="svg-icon fs-3 text-success me-2">
...
</span>
<div class="fs-2 fw-bold" data-kt-countup="true" data-kt-countup-value="6800" data-kt-countup-prefix="$">0</div>
</div>
<!--end::Number-->
<!--begin::Label-->
<div class="fw-semibold fs-6 ">Earnings</div>
<!--end::Label-->
</div>
<!--end::Stat-->
...
</div>
</div>
<div id="kt_docs_countup_tab_2" class="tab-pane fade" role="tabpanel">
...
</div>
<div id="kt_docs_countup_tab_3" class="tab-pane fade" role="tabpanel">
...
</div>
</div>
<!--end::Tab content-->
2024©
Keenthemes
