Animated Number

Make your webpage numbers pop with animated numbers.

Click on the live demo link to see examples, install instructions and configuration options.

Details

When the <animated-number> component becomes visible, it will start rapidly counting up to the number you set, creating a slick and professional impressinon.
This effect is great for marketing sites, admin dashboards and really any site that uses numbers and wants to leave a strong professional impression on a user.
What’s more, the hints respond to your scrolling and hide when you reach the end of the content.
It looks great on tables, grids, image gallaries, charts and more.

This component requires zero configuration out of the box, but is thoroughly customizable for different langauges, display formats and more.
Use in any project, be it vanilla HTML/JavaScript, React, Angular, Vue, Svelte or any other framework.

Supports

This component uses the browser-native web component API so it can be used in any HTML webpage and with any framework including:

1. HTML/JavaScript
2. React
3. Angular
4. Vue
5. Svelte

Includes

1. animated-number.js // Cross-browser script
2. animated-number.mjs // Optimal script for modern browsers only
3. animated-number-react.js // Script for React apps

Have Questions for Feedback?

Please leave a comment in the comment section and I will get back to you as soon as possible!

Happy coding!