CountUp.js Demo

CountUp.js is a great library to animate numbers on your webpage. Here’s how you can use it to animate numbers with custom duration and prefixes.

Installation

To use CountUp.js in your project, you can install it using Yarn:

yarn add countup.js --save

Import CountUp.js

After installation, import CountUp.js into your JavaScript file:

<script src="assets/libs/apexcharts/apexcharts.min.js"><script/>

<script src="assets/js/pages/countup.init.js"><script/>

Final Output

The number will animate from 0 to the target value with the specified duration, showing the prefix and adding separators for thousands. For example, the output would look like:

Conclusion

With CountUp.js, you can easily animate numbers and add visual flair to your webpages. The library is highly customizable and supports prefixes, duration, and separator customization.