Quick & Easy CSS Loaders

you're the best Brad! Thanks.

Thanks Brad, Awesome Video.

TYSM bro <3

Referring to the second loader, the 3 dot content css appears not to be working any more in 2022. I did mine and 3 dots didnt appear

Thanks Traversy for your good work

your master

This is the coolest thing i've ever seen.

really nice, thank you

brabo

Thanks Brad.. Can you do a tutorial on a preloader with a percentage and an image Background?

why loader.style.opacity = 0;
loader.style.display = 'none';

main.style.display = 'block';
isnt working?

HI Brad, I just started learning and I love your videos and learning so much from them. Keep going :)

thanks mate you saved me! Great job

Thank you for your amazing work🙏..

for loader #3 use this code for actual animation like Brad:

@keyframes bounce{
from{
width: 0px;
height: 0px;
}
to{
width: 16px;
height: 16px;
transform: translate3d(0, -16px, 0);
}
}

thx love ❤

mr how do you direct a user to ur main page after the loading is done?

If anyone doesn't want to put predefined time, you can use window.onload() .

Hello, thank you for this content. I have a problem: I can only see the loader with google chrome. Is there any code I can add to solve the problem with the other browsers?
thanks for helping!

You deserve another million subscribers.

Thanks Traversy Media channel <3

Brad, you are the king, thank you for this bro

🙏 🙏 🙏 ty ty

For some reason when I animate .loader it literally rotates like a clock clockwise, not like it does in your video. I went over my code and everything is the same as your code but I cant figure it out. Any suggestions? The .circle animation works properly.

I just integrated three dots loader into my React Web app for fetching from my API. Thanks you Traversy Media. I credited you and put source in the comments in my app.

oops that was supposed to be "subtle" not "suitable"!!

Hi Brad: Great job as usual! I don't always comment on your videos, but I always enjoy them. One suitable thing i noticed was that when you stated the code for the horizontal ellipsis was "ASCII Code", I believe you should have said "CSS Entity Code" instead. Believe me that I did not recognize this as an error immediately, it was only when I looked it up at w3schools that I saw there was a tiny error, probably just a mis-speak, but otherwise fantastic job! Take care and keep on keeping on. we all love ya buddy! (In a manly sorta way!)

This is fantastic! You are doing good job Brad, I learnt so much from your tutorials. Thank you! Greetings from Poland :)

Brad, I can't watch or take in anybody else's tutorials but yours. I have Asperger's and ADHD. You must be doing something right.

excellent brain exercise and syntax refresher .... I managed to complete it during work. Thank you again!

translate3d(x,y,z) and translate(x,y) is actually the same, when the z variable stays at zero. Am I right?

Thank you so much man this is awesome

you are the best

Wow, love this video. Thank you Brad!

Thank sir ^^ i'm from Indonesian..

sweeet

nice Vid, Brad, i will use it in one of my Freelance projects!! thanks

how do u make it to show up till the website actually loads??....i want to show the loader endlessly if webpage aint available

Hey brad I wanna join your course in udemy which is learn HTML CSS and sass I wanted to know what is the duration of the course and if I clicked buy now will it start immediately or how long will I wait

Really useful tutorial. It looks so easy. Good job Brad!

Hello Brad, keep up the good work boss. Please I have two requests, can you do a short video on how to use phpstan also php console. Thank you

Great tutorial always. Thanks!