1.1K
Number counting animation with HTML, CSS and JavaScript
In this blog post, I will show you how to create a number counting animation with HTML, CSS and JavaScript. This animation can be used to display statistics, progress bars, countdowns or any other numerical data on your website.
The basic idea is to use a span element for each digit of the number and animate its content using JavaScript. We will also use some CSS properties to style the span elements and make them look like digital displays.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Count Up Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" /> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="wrapper"> <div class="container"> <i class="fas fa-utensils"></i> <span class="num" data-val="400">000</span> <span class="text">Meals Delivered</span> </div> <div class="container"> <i class="fas fa-smile-beam"></i> <span class="num" data-val="340">000</span> <span class="text">Happy Customers</span> </div> <div class="container"> <i class="fas fa-list"></i> <span class="num" data-val="225">000</span> <span class="text">Menu Items</span> </div> <div class="container"> <i class="fas fa-star"></i> <span class="num" data-val="280">000</span> <span class="text">Five Stars</span> </div> </div> </body> </html>
CSS
* { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #121317; } .wrapper { position: absolute; width: 80vw; transform: translate(-50%, -50%); top: 50%; left: 50%; display: flex; justify-content: space-around; gap: 10px; } .container { width: 28vmin; height: 28vmin; display: flex; flex-direction: column; justify-content: space-around; padding: 1em 0; position: relative; font-size: 16px; border-radius: 0.5em; background-color: #21242b; border-bottom: 10px solid #18f98f; } i { color: #18f98f; font-size: 2.5em; text-align: center; } span.num { color: #ffffff; display: grid; place-items: center; font-weight: 600; font-size: 3em; } span.text { color: #e0e0e0; font-size: 1em; text-align: center; pad: 0.7em 0; font-weight: 400; line-height: 0; } @media screen and (max-width: 1024px) { .wrapper { width: 85vw; } .container { height: 26vmin; width: 26vmin; font-size: 12px; } } @media screen and (max-width: 768px) { .wrapper { width: 90vw; flex-wrap: wrap; gap: 30px; } .container { width: calc(50% - 40px); height: 30vmin; font-size: 14px; } } @media screen and (max-width: 480px) { .wrapper { gap: 15px; } .container { width: 100%; height: 25vmin; font-size: 8px; } }
JavaScript
<script> let valueDisplays = document.querySelectorAll(".num"); let interval = 4000; valueDisplays.forEach((valueDisplay) => { let startValue = 0; let endValue = parseInt(valueDisplay.getAttribute("data-val")); let duration = Math.floor(interval / endValue); let counter = setInterval(function () { startValue += 1; valueDisplay.textContent = startValue; if (startValue == endValue) {s clearInterval(counter); } }, duration); });
For More Tutorials Please Click Here