Spinners, Loaders, and Junk - CSS Animations
Вставка
- Опубліковано 27 січ 2025
- Let's make a lot of weird spinners and junk, because the web needs more spinners!!
Get the Code: codepen.io/devt...
- -
This video was sponsored by the DevTips Patron Community - / devtips
Listen to Travis' Podcast - www.travandlos....
Get awesomeness emailed to you every thursday - travisneilson.c...
You should follow DevTips on Twitter - / devtipsshow
I noticed the reason why spinner-2 was behaving bad was because you had the same properties for the CSS before and after pseudo-elements so when you applied the "bounce" animation in the &:before element on the same spinner-2 class and also the same "bounce" animation on the "&:before, &:after" the browser prioritized the animation properties defined inside the "&:before, &:after" for ".spinner-2" and the same animation was applied to both the "before" and "after" elements for ".spinner-2".
I sorted out those two mad balls by separating the "&:before, &:after" elements applying all the properties found in the original chained "&:before, &:after" up until the "margin-left" property, these were inserted on top of the original single "&:after" properties.
Then I applied the animations for the before and after individually, naming them differently and tweaking so the balls dont cross the bigger circles boundaries.
Here is the fixed version, I forked it but made it clear Travis from Dev-Tips made the original: codepen.io/Flashpeed/pen/qNLBXV?editors=1100
Thanks for doing this. That makes a lot of sense. Upvote!
Thanks for these tips dude. They're really 'useful' is probably the best compliment I can give. Saying they're 'entertaining', 'engaging' or 'informative' (which they are) doesn't quite communicate the value they inherently offer. Than you.
I appreciate your encouragement my friend. Thanks for watching :)
Wow! I really appreciate your tutorials. I can safely say that you've opened up CSS for me! I used to fear and loathe it, but now it's something I enjoy doing. In fact, codepen has become a hobby for me. Thank you!
Travis, the guy getting a backend developer interrested in design :)
They said it couldn't be done ;)
Challenge accepted! codepen.io/pentopaper/pen/vKvVEL
1) Changed the openings in the ::before and ::after elements so there wouldn't be a gap in the back
2) Adjusted chomp to have a difference of 50° each, for some reason 45° seemed to leave a tiny gap between the "jaw" when it closed
3) Added a .cover to cover the dots Kurt has already eaten & reload them after each pass.
4) The animation pauses a bit after it makes each pass.
5) [EDIT] Also, forgot to mention that I solved the problem with it flipping by assigning Kurt a set width (height couldn't hurt either).
Wow that turkey radar thing got me :'). Awesome to see you having fun with this. Thanks for the videos, great as always.
These videos are awesome. I am really enjoying the lessons and the fact that you don't take them too seriously.
One thing I do like particularly is the way you are having fun doing this thing! Awesome! Keep it up!!
I simply don't get how is it that this channel doesn't have like millions/billions of followers.. just check the like-dislike ratio, it's insane! Thanks for the content. I'm so glad I found your channel; 5 years later this is still so useful and relevant.
Dat boing doe
BOING!
lmao i love this series. you're so entertaining. i watch these in my free time haha
Dude, you had me cracking up this morning, especially with the turkey radar. Awesome way to start my day!
Glad you had fun Marco, thanks for watching :)
Awesome video, i never realized making such cool animations could be this simple. Thanks 😊
You made me laugh and learn. Thanks Travis :)
Perfect combo!
never thought i would have so much fun with CSS in my life ... what a time to be alive :) , thanls for the video :D
I really enjoy every video you do. You make learning complicated stuff much easier!
The atmosphere in this video is just a mood-raiser! I laughed loudly along, even my husband asked me what is so funny that I'm watching :D
Can you tell my why css in this video look so... weird?
+thronecode Because Travis is using Jade ;)
+thronecode and SASS, but you should really watch more videos on his channel, there you will find all the answers ;)
TheMalni Oh! Thank you so much Malni! Gonna add it to my list of things to learn :)
6:07 Its because if you rotate 360 deg you end up in the same point, that's why its not "animating"
at 5:30 use transition-direction: alternate to easily make it go forwards and backwards repeatedly
u are so happy. I love it
Damnn this sound!!
haha
gays are happy people!
Damn, I haven't been so much entertained, during a learning session, since never. Great job.
Thanks for the sudden scary sound at 4:41 LOL
hahha, boo!
Lol 14:4 ta dnous yracs neddus eht rof sknaht
4:25 - JUMP SCAPE OF THE YEAR
Dude, turkey radar made me laugh so much :)! Because of that funny moments it's much easier to learn and remember things. I'm glad to learn from your videos, your job is cool - HIGH five :)!
lol, the timer going off made this much more enjoyable to watch
haha, yea, that was a fun little thing. Stressful tho. It's like waiting to get slapped in the face. lol
You should have Los slap you when your time is up (reminiscent of the CSS Basics series).
hctaw ot elbayojne erom hcum siht edam ffo gniog remit eht, lol
This is called real passion. Loving n enjoying what you do and you're damn good at it. Thanks for the videos dude. Love em n you.
Thanks Hemant, I appreciate the love :)
yoooo, I love this channel. That boing timer was funny
You are fun to watch! Learned a lot and can't wait to use them on my nexr project. Nice vid!
First video of yours I watched, I loved it, and immediately subscribed. Keep doing your thing, its awesome :)
Thank you travis! and it's so refreshing to see pug and sass as it should be written
haha, Love me some pre-processed code :)
thanks alot man your videos are awesome can't believe someone is sharing these kind of basics on youtube hatts off
Can't thank you enough for this absolutely invaluable resource :)
You are absolutely welcome :)
the reason is the fact that the transform property overrides so when you just set scale on the 50% the rotate gets lost
yep, specificity FTW!
0 to 0% working as start and endpoints is very normal. Think of it this way, when you add 1 to 360 in most editors, it will become 1. In this way it actually reads 0 as the same as 360 in a lot of cases. If you have a start and endpoint that are both 0 or 360 or in this case 0 or 0, the animation will work the same as if you set 0 and 100.
I don't know if I explained this clearly, but that's my mileage on this topic. I've had this happen a lot when working with rotations.
I can watch these videos all day. I feel like we are working on this together.
That's great to hear :P
DUDE YOU'RE SO COOL WITH THIS STUFF... THANKS FOR SHOWING US
That timer made me jump from my seat, hahaha.
Me too!!
omg, the second spinner just made my day :D
luv ya, Travis, you're motivating and super cool, and all the stuff you show is very useful and amazing ;)
greetings from Russia!
another amazing video from trav! you are always awesome!
The boing! And the rapid lower lip chomp had me rolling.
HAHAHa, Killed me :D
HAHAHa, Killed me :D
I really need to read the docs of transform-origin. Every time you are using this property my mind simply explodes :D
Its like this: from where do we start this transformation? By default it's center center
DevTips Yea, it's pretty much like an Anchor Point in After Effects, but it still confuses me every time :D
+DevTips it's like an ancher point in photoshop, right? I mean the little thing in the center of each element when you press ctl + t
great effort and awesome animations
thanks Travis :))
Thanks men'm!
I had no idea that css was this powerful dang this is awesome!
I like how you said "This is raw, uncut" and then immediately there was a cut. ;)
HAHAHA. "Raw, uncu-."
I am a simple man. I see Travis i press like:)
Greetings from Russia)
Hahha, that's a good formula.
Travis you're awesome!
You're THE Master of CSS my friend.. WOW !
Thanks Carlos!
21:33 I WANT WHATEVER THE HECK HE'S BEEN SMOKING!!!!
That surprised look with "Boing!" and to make it worse, the snort. :D
hahah!
There is a fine line between genius and insanity!
You could've gone with rotate(45deg) and it would've been perfect, cause each individual border with color transparent is cutting off 1/4 of the circle, and since you're moving the bottom and the top part by half of the angle of that, 45deg is the answer, and you're gonna get much nicer animation.
Anyway it was really exciting watching this, I could've never come up with something like that :D
Good point, thanks Darko :)
Great video. I'm watching at work so it was extremely hard not to laugh. Thanks for the insights
Totally yay'd and yo'd, laughing the whole time. Insanity is infectious.
Hahah, thanks Jonathan :)
Thanks for the videos, they are entertaining and I've learned a bunch. I like that you don't always plan everything out, so we can see the thought process as well.
does anybody know how to activate the spinners while the page is loading and stop when it is loaded?
using conditional statement to render your spinner
working on the bouncy animation and then he's startled by the bounce alarm
Thanks for sharing this very enlightening and useful tutorial ...
you are welcome!
His antics are hilarious 😂
Haha loved the BOINK jumpscare!
hahha, I bet you did. haha.
sir, how to use gradient in border color? i lose the border-radius when i try to do this.
hey Travis!
have you seen the google Olympics web app ?
obviously you knw how to create this fancy stuff (animations, behavior of pages when we move to another page ).. could you please tell us how to make it..??
23:34 JUMPSCARE, AHAHHAHAHA. Nice ringtone
tutorial was awesome can you provide the all property of animation and @keyframes? or another link of web that tells me properly how many types of animations and @keyframes property thanks.
It would have been easier to have do the pacman chomp like this:
- have the bottom segment with a border-bottom-left & border-bottom-right. Likewise a top segment which would be border-top-right & border-top-left. That would then be two halves of a semi-circle
- then you animate them from 45 degrees to 0 and probably -45 to 0
Your lessons very meaningful! Many thank from Russia :)
Hello Russia! Thanks for watching :)
But how to set a loader, tracking progress and showing it with percents?
You have to get that info somehow from your loading api if you have one. Then connect that info to the "left: 0%" style.
+DevTips thanks!)
Awesome. Thanks. I fixed the code to work perfectly. Really enjoyed the tutorial.
.track{
width: 300px;
height: 0px;
border-top: 8px dotted #eee;
display: inline-block;
}
.kurt{
animation: moveChomp 5s linear infinite;
width: 0px;
height: 0px;
position: relative;
top: -15px;
left: -15px;
}
.loader{
background: none;
display: inline-block;
position: relative;
}
.loader:before, .loader:after{
content: '';
display: block;
height: 0px;
width: 0px;
border: 30px solid orangered;
border-radius: 50%;
border-right-color: transparent;
position: absolute;
border-bottom-color: transparent;
top: 50%;
margin-top: -34px;
animation: topchomp 1s ease-in-out infinite reverse;
}
.loader:after{
// left: 80px;
border-color: orangered;
border-top-color: transparent;
border-right-color: transparent;
animation: bottomchomp 1s ease-in-out infinite;
}
@keyframes bottomchomp{
0%, 100%{
transform: rotate(10deg);}
50%{
transform: rotate(-50deg);}
}
@keyframes topchomp{
0%, 100%{
transform: rotate(-20deg);}
50%{
transform: rotate(37deg);}
}
@keyframes moveChomp{
0%,100%{
left: 0%;}
50%{
left: 100%;}
0%{
transform: rotateY(90deg);}
3%, 47.5%{
transform: rotateY(0deg);}
52.5%, 98%{
transform: rotateY(180deg);}
100%{
transform: rotateY(90deg);}
}
@33:21didn't you say earlier you can't give inline elements dimensions?
Thanks for all the content dude, I'm teaching myself HTML and CSS and your videos are excellent!
Never clicked on a video so fast lol. Can't wait to watch Travis!
right haha same!
Thank you so much!!
Hola Travis, te sigo desde hace rato y he aprendido mucho de ti. Supongo que el código se entiende en todos los idiomas, Gracias.
Thanks Travis!
You are welcome!
Cool Dev!!! do you have a book on these cool css animations?
why the second spinner has a dot as border
May i ask what the &:after, and &:before serves in a normal webpage? i have taken up web development and i have never come into a case where i need to use it, or at least that i have realized.
Shouldn't you be using the ::psuedo syntax instead of the single colon?
Travis when are u coming back ?
@42:40 make both the chomps
@keyframes chomp
0%, 100%
transform: rotate(43deg)
50%
transform: rotate(-43deg)
but delay one 0.5s w.r.t the other!
Nice!
Hey Travis,
Awesome video .. as expected! ;)
Travis, you are the man!
However, in this particular video, I wasn't catching on? You were doing more showing than explaining what each css property would ultimately do,thus I had to guess what animation meant or how would it perform? Or "before" or "after" meant? And so on?
I am 10 and to be honest, my favourite channel is yours Travis.
Hey Dev, I have a query that you use different software for coding but I use notepad ++ and dreamweaver for coding and the code you use sometimes does not work on both the above mentioned software can you help me to how to make drop-down navigation bar with different effects you had showed in your video.
You spin me right 'round, baby, right 'round
Like a record, baby, right 'round, 'round, 'round
Muchas gracias por brindar tu conocimiento. 👌 amazing contribution!.
This video was fascinating enough to motivate me to do 63% of codecademy's HTML & CSS course in one day xD and I'm still going. Awesome vid. And this is coming from a guy who's main focus should be python
have a tutorial about before and after ????
You're fun...ny! Enjoyed your tutorial. Conceivably I should be able to make a loader/spinny thing that looks like a glass of water filling up (can this be a gif?) and code it with css into my html? Or do I need to use something else? I'm struggling with this at the moment...this can be done right?
is he using atom? how does he make that split view.
Great as always
Thanks Bazkur :)
How to put that in web page? l mean when page load it will show
Hahaha that boing was hilarious 😂
Classic Boing
LOL, keep the timers! It's a Keyframe on it's own!
Another challenge: make the dots behind disappear. I would say that behind the pacman there is a bar with the background color that blocks everything behind it.
Cool as always. Thanks!
Hey great video Travis! But I'd like to see a video on how to make an image preloading animation that disappears when the image is loaded. Could you do that? Or just tell me real quick how it's done :)
That's all done in JS. So the way it works is you place the animation and then tell JS to load new content in when it's ready. It rill replace the spinner.
+DevTips Thank you for your help :)
You had almost too much fun Travis. Almost.
Almost is the operative word. :D
I am watching this at work and having LOL moment on that super fast chapm champ champ (44:19) :D that was so funny :D
HAHAHA, chomchomchomchomcmcmcmcmc. That killed me!
I am wondering how can i make my animation go 50% when i hover and then fallback to 0% slowly when i leave the hover. Right now it just teleports to its initial state. It's not that simple as just ease-in , ease-out right?
Use two transitions, on on the hover state and one not. Make them different. Play with it till it makes sense to you.
Oh i actually got it to work :D Thanks!
It kinda feels funky tho because if the mouse is taken off midway animation it would cut to the end of the animation and start to fallback at that point.
I think i would need to gather the % rotation that it is on and from there go back to 0%.
I am making this way more complicated than needed i guess.
I love your videos, and your personality. I would definitely be your friends in real life if you weren't weirded out by that comment lol.
keep up the awesome work.
I'm completely lost on how you managed to "cut" out a triangle in that circle for the pacman face. What's happening there?
The circle was a 0px 0px element with s 30px border. I rounded the border, then removed the border-right- creating the gap
for sharing your knowledge with us
LOLOLOL! You crack me up! :-D
I wish you did all the tutorial videos I watch. I actually stay awake watching your vids. :-D
I'm so happy to hear that you like them Matt!!
From where can I get that ringtone :P