# Documentation v8.0.38

Preview Downloads Purchase

# 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 `KTApp`wrapper defined in `src/js/layout/app.js`within the `initCountUp`and `initCountUpTabs`functions.
- 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 with `data-kt-countup-value`. For more options available, such as `loop`parameters 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 websitefor 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 svg-icon-3 svg-icon-success me-2">
                ...
            </span>
            <div class="fs-2 fw-bolder" data-kt-countup="true" data-kt-countup-value="4500" data-kt-countup-prefix="$">0</div>
        </div>
        <!--end::Number-->

        <!--begin::Label-->
        <div class="fw-bold fs-6 ">Earnings</div>
        <!--end::Label-->
    </div>

# Custom

CountUp can be customized with any of our extended Bootstrap classes.
0
Known Companies
0
Statistic Reports
0
Secure Payments

    <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="svg-icon-4x svg-icon-primary mb-3">
                ...
            </span>
            <!--end::Symbol-->

            <!--begin::Info-->
            <div class="mb-0">
                <!--begin::Value-->
                <div class="fs-lg-2hx fs-2x fw-bolder 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-bold fs-5 lh-0">
                    Known Companies
                </span>
                <!--end::Label-->
            </div>
            <!--end::Info-->
        </div>
        <!--end::Item-->

        ...
    </div>

# 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-bolder 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 svg-icon-3 svg-icon-success me-2">
                            ...
                        </span>
                        <div class="fs-2 fw-bolder" data-kt-countup="true" data-kt-countup-value="6800" data-kt-countup-prefix="$">0</div>
                    </div>
                    <!--end::Number-->

                    <!--begin::Label-->
                    <div class="fw-bold 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-->

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now