Animated Counter With JavaScript (HTML, CSS)
HTML-код
- Опубликовано: 5 фев 2025
- In this mini-project, I will show you how to create an animated counter that counts up to any number using JavaScript with HTML & CSS.
Code:
codepen.io/bra...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Course Links:
www.traversyme...
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia 
Наука
Keep it up man! You’re contributing a hell lot in the tech community
Everytime I look for something after searching YT I come back to your channel. Sir you are amazing... God bless you🙏💐
I love the way you teach sir.
Just wanna say THANK YOU.
All you efforts means a lot.
THANK YOU SO MUCH.
Love and respect from Pakistan.
Whoever read this you'll be successful one day, let's do this together for the future
*" 1.01M Subscribers "*
looks so good on your channel.
He really deserves it!
Thanks man 😊
Awesome content as always. I recommend your tutorials always to my juniors.
Thanks :)
@@TraversyMedia And I cannot explain to myself what an increment is(((???
I was about to follow a tutorial on how to create a website with some different stats, and I thought it would look cool to have a counting animation. And guess what popped up in my feed of recommendations, and by whom it was done. Yes, you've probably already guessed it. Brad Traversy is the man!
That 1.01M is so legit on this channel. You really deserve it man!!
Not only programming, I also learn English from Brad and that's why I never fail to watch every single he uploaded😁
I've googled for 2days, but couldn't find any codes that not used the library. but your codes solved my problem, thank you!! 👍👍👍
I can't just stop watching your videos. Thank for your time and making sure we learn from your tutorials. I wish to meet you one day. From Nigeria I'm 15. And Iearn pretty good from you
You are my idol as a web developer. You have helped me to get my first job and maybe second one soon!!!! Thank you
Brad ur just god gifted teacher for the students on earth... Lots of love and support from india 🇮🇳...
You know what, it makes me smile when to see a new video alert from Traversy Media. And especially if the content is something that I was looking for a long time. Thank you man. Best lucks in your life.
need more of these works brad , there are many of these works , but with low clarity , thank you.
i love you brad. you are awesome. you teach me HTML CSS. now i am learning javascript. the way you explain things are really easy but helpful. god bless you Brad.
Thanks so much brad, this is great! These type of tutorials are the actual foundation. Everything is so saturated with frameworks libraries that some JR devs forget that this is the bread and butter here.... Thank you for all your tutorials and for everything you teach man!
We need thousands of project like this from you !
Love these little shorter one-shot design element ideas to add to our toolbox! keep up the good work!
Small JS code for great feature. Thanks as always and Congratz on 1M subs! You deserved it!
YOU ARE THE BEST ALWAYS DOING WHAT'S ON MY MIND, JUST THE OTHER DAY I WAS LOOKING FOR THIS TUTORIAL AND I LOVE TO TRY TRAVERSY MEDIA FIRST ALTHOUGH I DID NOT SEE IT THEN I'M REALLY SURPRISED THAT FEW DAYS AFTER MY SEARCH , NOW BOOM!!!! "THE AWESOME BRAD TRAVERSY MADE IT A REALITY ". MAY GOD KEEP YOU ALIVE AND EVERY OTHER TECH TUTORS DOING IT YOUR WAY "YOU ARE A STAR IN THE TECH WORLD"
thanks man, lot of heart and really usefull. people reading you may figure this easily, but if you are sleepy as I am right now you will want to put counter.innerText instead of coun.innerText. Other way it'll write mistaken decimals. Cheers!
Sir, allow me to say this. You are good and amazing at what you do. I admire your work. You inspire me a lot.
Love the counter script. Very elegant and easy to read.
Adding a fade in effect on scroll would have been the cherry on top 😜
This video came in handy Brad... You really helping me a lot over here... With love from Kenya
Awesome as always. Congratulations on 1M Subscribers. More to come. All the best. Please make awesome tutorials as always.
Good stuff. HTML, CSS, and JavaScript is always a good idea for beginners
This guy is my mentor.
That was super sick at 13:12
Brilliant video i will be changing a few bits in the code but this a huge time saver for a newbie to JS.
> 1M congrats. Deserve, great channel 👊
Once again, fantastic work! You are a web dev ninja!
best js tutorials out there. THANKS!!!
Awesome.
1.01 million subs finally Awesome.
Waiting for your giveaway 😋
Great Video man. I learn much better with you man. your so easy to understand :)
Your tutorials are the best 😊
Great as always Brad , cheers from Argentina
Awesome was looking for something like this for a while. Great tut and great tutor...
Wow, we always have something new to learn, I never saw this way of converting string to number using only +, I always use Number, parseInt or parseFloat, very good!
I thought this was cool too. I guess it works because the engine is coercing it to a number type since he's trying to perform addition on it?
@@christopherc7069 it is called unary plus.
Just started learning php becoz of u dude. Loving it so far . abit of a novice but at least an 1hr or 2 each day reding an practicing.
Check my PHP Front To Back series. It is a few years old but it is all fundamentals so all still relevant.
For anyone wanting to make this as an onscroll event here is a version I made. (I also added in comma's in the final display):
window.onscroll = function() {
let windowPos = window.scrollY;
let counterPos = document.querySelector('.counter').offsetTop;
let scrollTrigger = counterPos - window.innerHeight + 200;
if (windowPos >= scrollTrigger) {
const counters = document.querySelectorAll('.counter__number');
const speed = 551; // The lower the slower
counters.forEach(counter => {
const updateCount = () => {
const target = +counter.getAttribute('data-target');
const count = +counter.innerText;
const inc = target / speed;
// Check if target is reached
if (count < target) {
counter.innerText = Math.ceil(count + inc);
setTimeout(updateCount, 100);
} else {
counter.innerText = target.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
};
updateCount();
});
}
}
not working for me
should we add counter__number to that counter div?
Wat can we do without brad?😂😂
Just what my client needed ... thanks
thanks a lot from Algeria
Wow I was just thinking about how to do this. I've followed ur bootstrap course on udemy. Wow ur rili doing an excellent job and ur inspiring odas lyk me. Thank you
Thanx Brad, very interesting and simple!
Whenever I want to find some material for learning , i always wanted to be your video.
your way of telling things helps me a lot . and I am starting to be a .NET developer.
firstly , front -end then move forward.
can you atleast help me about which things and frameworks should i work on and learn and practice.
if you have time please . THANKS FOR YOUR DEDICATION AND HARD WORK IN ALL THOSE YEARS.
Very good styling
Great video! Thanks for all of the effort you put into making this, and all other videos! It’s appreciated!
I have a point to make and a question.
Point to make: There is an issue of overflowing the target number when the data-target values are not divisible by the speed value. For example if the target-value is let's say 60010, and speed is 200 it would count up to 60200. So we would need to check if we are over the target value in the if statement or maybe apply additionally min function like: Math.min(Math.ceil(count+inc), target)
Question: Let's say we have this counter div somewhere down below our webpage. We want to start the count when we scroll down to the div and it becomes visible, rather than when the page loads. What is your suggested way of doing this?
Great job as always! Thanks for all this free info!
To make it animate when it reaches the desired location u can use getBoundingClientRect().top look it up.
u can use it like this if(desiredLocation.getBoundingClientRect().top < window.innerHeight{
then do this;
}
const counterSection = document.querySelector(".counters");
function incCounter(){
const counters = document.querySelectorAll('.counter');
const speed = 200; // The lower the slower
counters.forEach(counter => {
const updateCount = () => {
const target = +counter.getAttribute('data-target');
const count = +counter.innerText;
// Lower inc to slow and higher to slow
const inc = target / speed;
// Check if target is reached
if (count < target) {
// Add inc to count and output in counter
counter.innerText = count + inc;
// Call function every ms
setTimeout(updateCount, 1);
} else {
counter.innerText = target;
}
};
updateCount();
});
}
const counterSectionOptions = {
rootMargin: "-200px 0px 0px 0px"
};
const counterSectionObserver = new IntersectionObserver(function(
entries,
counterSectionObserver
) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
} else {
incCounter();
}
});
},
counterSectionOptions);
counterSectionObserver.observe(counterSection);
Done using Intersection Observer :)
Thank you very much. Very good tutorial.
This make so much sense
The way things are going, you'll need a considerably smaller font size for your webpage, Brad. Congrats on the mil, dude.
You legend, thank you for everything you do.
Veeery cool, Brad! Thank you, cheers from Thailand...going to the beach, now :) !
You are awesome. Thanks for sharing your knowledge.
Wow I learnt a lot. Thank you Brad
thanks for this creative tutorial, actually we don't need to write media query to achieve two-column, with grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) the column container responds to different device width (including 700px) automatically, so we don't need media query anymore unless specific needs !!!
i`m very grateful for this tutorial
Really clear, really good !
Thanks for the awesome content you put out Brad!
Nice Tutorials. Totally loved it!
So excited to watch
.. keep it up bruh...
VERY Helpful... Thanks
helpful as usual :)
Many thnx, bro !
Love from India
Please make video on your tutorials behind the scenes please brad I'm your biggest fan in programming world please accept my request brad
Love from Pakistan
"1.07 million subs"
looks so good on your channel
Amazing as per 👍
How to put comma in thousand number?
Thank you Brad
Also thanks for sharing, I really like you for your good work, blessed you
Great video!
Exactly what i need bro, thank u a lot
Why the 4 numbers grow in parallel ? In the loop it should the first number reach the target then the second etc... Does this have to do with the fact that with setInterval we made updateCount a recursive function ?
Great tutorial. Finally a tutorial with pure javascript. I have a question though, when the numbers are much smaller lets say 90. It tends to convert it into float number when its animating. I think its because the division. Any idea how to fix this?
Inspired your prev video about Microsoft clone, I've created Apple homepage clone. Thanks for useful and inspiration videos!
thank you it is very good for me
Thank you man. How to set a timer to each counting items for serial counting?
Great job, thank you brad
Thanks Brad ..... Keep it up.
The numbers show up in fractions if the target is less than the speed. Also math.floor doesn't work on the same. Any solutions for that?
I found the solution just use counter.innerText = Math.ceil(count + inc);
Awesome as always , I want to learn javascript from scratch, which playlist or course should i follow, thanks in advance
How can you make the counting slow down as it reaches the final value?
Do we need to use clearTimeOut for this?
Awesome tutorial! Just checking if its possible to make the target value dynamic so it increment by 200 everyday? Thanks
*hey Brad, what are your thoughts on Headless wordpress with React for freelancing??*
I think it's a good idea. Wordpress is great for clients to be able to update their own content and using React allows you to have a fast and customized UI. Some other alternatives to WP are Contentful, Strapi, Prismic. I plan on making a video on at least one of them
Strapi with React would be nice.
@@TraversyMedia Strapi + VueJS would be lovely too.
You have a slight error in your Codepen version. The comment next to "speed" says "the lower the slower", but it's the other way around.
Hey Brad, the time you added a "+" to a string character and it converted to numbers, does that happen in all cases or just specifically cause it was a data-target attribute?
That happens always, it is a unary operator equivalent to do Number(value)
Why other counters are not waiting for the previous one to count until the target and then start counting? Why they are all counting at the same time?
Has something changed in JS? This is not working for me. From the first console.log(target) it's not showing anything. I put a solo console.log("Hello world") in the file and that is showing up. Any help would be appreciated!
Thanks for this nice tutorial. How is it possible to show a value in Hours:Minutes:Seconds likte total running time?
Going to add this tomorrowwwww
Great video.
I would've used the dataset property to access the HTML5 data attribute.
And maybe iteration over recursion in this case.
Great content
You are a great soul
Hey you rock sir!
Love the solution! I am experiencing an issue that I hope you can shed some light on... I deployed this solution in a script web part on a Modern style page in SharePoint. The script fires perfectly when you first go to the page. However, when you navigate internally on the site and go back to the page with the script it fails to fire. I've tried wrapping the code in a function and calling it on page load, to no avail. Thoughts?
Is it possible to have the numbers going up at different speeds inside of one set of code instead of repeating the exact same code over multiple times with different speeds?