Let's build a simple but pretty cool SVG loading spinner with CSS key frame animations. All right, so we have this for now boring SVG circle and let's jump into the code again. I'll have the code and browser side by side. I think it makes sense for this example. And for the markup we have an SVG with a class of spinner so we can target it. And then we have this circle element which has a radius of 25 and a black stroke of a five pixel width, like I said,

And then we have this circle element which has a radius of 25 and a black stroke of a five pixel width, like I said, very basic and pretty boring. So let's spice it up a little bit with some CSS and key frame animations. So we'll target the dot spinner, circle, the spinner being the SVG tag. And then we wanna animate the circle. And so we'll use our friend the dash array once again. So stroke dash array and let's go with 20

And so we'll use our friend the dash array once again. So stroke dash array and let's go with 20 and 500, 500 being a value intentionally too high and we'll work that out. Okay, cool. And let's also have rounded uh, line caps. It looks better. So you can define this in HTML, but also in CSS stroke line cap round. Very nice. And let's quickly work out the total length of the circle like we've done before. Let's try one shot.

of the circle like we've done before. Let's try one shot. It's document dot query selector and we want to select that spinner space circle. And then we want to get total length like this. Ah, very nice. So 156. Okay, let's keep that in mind. And we can change this here to 1 5 6, which means that if we had 1 3 6, it should still work. And just to be safe, we should go 1 37. And these two values together should cover the exact

And just to be safe, we should go 1 37. And these two values together should cover the exact length of the circle. And I've just realized we could have worked that out differently with some school maths. So because the radius is 25, you might remember that two times pi times radius gives you the circumference. So two times pi times 25 would've given us the 157 value as well. Ha, I'm glad I finally used this knowledge.

157 value as well. Ha, I'm glad I finally used this knowledge. Okay, so let's go and define some CSS key frames and we will call this load. So I think I want three steps. I want 0%, I want 50% and I want 100%. So there'll be a few components to our animations. We want the circle to spin and then we want the dash array to change length.

We want the circle to spin and then we want the dash array to change length. So it kinda has this dynamic effect. So maybe I'll start by adding the rotation, transform, rotate 360 degrees. And because we have a 50% stop, we also need to define the middle stop like this. And so let's try apply these key frames to our circle. So animation loads, let's load over two seconds in a linear

So animation loads, let's load over two seconds in a linear fashion and infinite. So it should infinitely spin. Whoops. Uh, it looks like, uh, animation is wonky because the transform origin is on the top left. So I can go transform origin center like this and this should fix us up. So that's a good start. Uh, but now let's play with the dash array length

So that's a good start. Uh, but now let's play with the dash array length to really make this effect dynamic. So maybe I will take this stroke dash array and remove it from the element and instead we can hear at the zero mark and the 100% mark. Set it like so. But then halfway through we wanna make it longer. So maybe let's actually invert the two numbers. So we want the dash to be 1 37 long

So maybe let's actually invert the two numbers. So we want the dash to be 1 37 long and then the space, we can go 20. And again, it should go to 1 57, which is the length that we need to cover. Let's take a look. Hey, that's pretty cool. There's a little problem. Well I think that's a problem and it's when the dash shrinks, it kind of comes back to itself from the both sides and it looks like it stops spinning.

to itself from the both sides and it looks like it stops spinning. So we kind of wanna exaggerate the rotation. So it looks like the tail end is catching up with the front end. Let me show you. And it should make sense. So what I mean basically is that the head, imagine that's a little worm here, the head of the worm should not go back. It should stay exactly where it is

of the worm should not go back. It should stay exactly where it is and the tail should catch with it faster. And while we know that at its full length, the worm or the dash is 137 pixels long. So what we could do is add an offset to the dash and you've seen that properly before as well. Stroke dash offset and it's proposing minus 59. Uh, I imagine this is 1 37 divided by two.

and it's proposing minus 59. Uh, I imagine this is 1 37 divided by two. No, this is 69, huh? Lemme try it with 69. And I just realized that co is probably right because it's factoring the initial length of the array and taking half of it. But let's try with stroke dash offset 69 and I mean that's pretty cool. Uh, you can see that now we have that feeling of that worm that gets caught up by its tail

Uh, you can see that now we have that feeling of that worm that gets caught up by its tail and then rushes with the head forward. Uh, let's try 59 because I think it's gonna be spot on uhhuh. Actually no, I think we should go the other way. Uh, 79 and you can see that now it's all so subtly going backwards, so it's not perfectly correct. I think the actual value that we need is half the full, uh,

so it's not perfectly correct. I think the actual value that we need is half the full, uh, length, the circumference of the circle, which is 1 57. So if we do 1 57 divided by two, it's 78.5. And well that's actually what we had. So what happens if we go 78 and yeah, it looks like this time it's working perfectly and it sort of makes sense if we offset the whole circle by half the length of the circle, it makes sense

and it sort of makes sense if we offset the whole circle by half the length of the circle, it makes sense that both end come to each other at the same speed. But then there's the rotation that kind of offsets the tail to catch up and the head that doesn't move. So we could totally stop here and it's already a pretty cool effect. And as you've seen, that's pretty easy to build. But I think if we tweak the easing timing function on the zero to 50%

But I think if we tweak the easing timing function on the zero to 50% and then the 50 to a hundred percent, uh, key frame gaps, it's gonna look even better. Alright, so check this out. I am going to remove the linear transition timing function here on the animation and instead I will add it here in the middle Key point, transition timing function, linear. And I will copy this, but now what I will do is

transition timing function, linear. And I will copy this, but now what I will do is for the first key frame from zero to 50, we are going to go with ease out. So it starts fast but progressively slows down. And for the last one I will go ease in. And so now you can see that it has that more subtle, uh, worm. It actually feels more like a worm now. Uh, it's a little bit more interesting

It actually feels more like a worm now. Uh, it's a little bit more interesting and I think if we speed it up a little bit. So I will go duration one second, huh? Maybe 1.5 seconds. It's going to start to look pretty cool. Of course, we can play with the length of the dash array. You could do any sort of things you want. Let's maybe try to make the dash not go that short and not feel almost completely. So maybe here instead of 20, we're gonna go to 50,

and not feel almost completely. So maybe here instead of 20, we're gonna go to 50, uh, 50 here. And let's do, so I guess it's 1 0 7, although it doesn't matter if it's a little bit more. And let's here invert them. So 1 0 7 and 50 and see how that affects the animation. Okay, so maybe I've made it worse here, but whatever. Uh, and why don't we finish up with something just completely crazy.

Uh, and why don't we finish up with something just completely crazy. So I'm going to add some dashes. So 10 10. So it should add a little 10 pixel dash at the start. And then let's add this dash at the end in the middle. And then back at the start, I have no idea what it's going to look like and it sort of looks weird as expected, but also it's kind of interesting and it shows you that you can probably do a lot of cool things, uh, with dash offset

and it shows you that you can probably do a lot of cool things, uh, with dash offset and dash array by themselves. All right, I hope you enjoyed this little demo. We've talked about CSS animations. We talked about SVG animations. It is now time to dive into JavaScript animations.