2.2 SVG Page Loader

Welcome to our second project, where we'll create an SVG page loader. So let me show you the final result or at least the sketch mock-up that I created. So it consists of four circles with different radiuses. And each circle is kind of cut off, so we have just arcs. And those arcs will basically rotate individually creating a nice page loader. So for this particular project we're gonna use an SVG, and we're gonna write it right now. So I'm gonna start with this SVG with an ID of page-loader. And then inside, we're gonna create four circles. We're gonna start with the circle element, and we're gonna give it the coordinates. So I'm gonna say cx, which is the x coordinate of its center. I'm gonna set this at 75. cy is also going to be at 75. And r, which stands for radius, is gonna be at 20. All right, so that creates a nice circle. Now I actually don't need this bit. Now let's go head and create the other four circles. And all we are gonna do here is change their radiuses in 15 pixel increments or 15 units. So this is gonna be 35, this will be 50, and this will be 65. Okay, so what you're seeing now is [LAUGH] you're actually seeing this circle. Because they are filled, we're gonna remove the fill. Later on we'll just leave the borders, but for now you're just seeing one big black circle. All right, let's move on to CSS. We don't need the HTML panel opened anymore. And I applied the same styling as I did in the previous project just centering items with flexbox. This is currently not centered because we need to apply a width and a height first. So let's go ahead and do that. We'll say the next step, style the SVG circles. So we'll start with this. We'll reference the page loader SVG, and we'll set a width of 150 pixels and a height of 150 pixels. So by doing this, you can immediately tell why we chose these coordinates for the circle centers because 75 is exactly half of 150. So we'll make sure that if our SVG is 150 pixels in height and in width, we're setting the center of those circles right in the center of the SVG. Next, let's target each individual circle. So page-loader circle, we'll do this. We'll set the fill to none. That will remove that background. And we'll set that stroke, stroke-width, or the border to 10 units. Next, we'll target each individual circle, and we'll give it a different stroke color. So we'll say page-loader circle, and we'll use the nth-child selector. nth-child(1) simply means the very first circle. And we'll set stroke. We'll get the colors from the Sketch file. The first color is ffc114, and you can see it right there. And this is where it gets interesting. We're gonna use the stroke-dasharray property to just cut off that circle. So I'm gonna use stroke-dasharray. I'm gonna give it the value of 50. That's gonna create a cut off. And also I want to round off these edges. So I'm gonna add the property of stroke-linecap: round. Oops, and that's gonna round off the edges of this circle. Next, let's just simply go through the other three circles, 2, 3, and 4. And we'll simply change the stroke color and the stroke-dash array value. For number 2 we have ff5248, and the stroke-dasharray is gonna be 100. For the third one, we'll go for 19cdca and a dasharray of 180. Of course, you can play around with these and create your own circles. And on the last one it's gonna be 4e80e1, that blue color. And we'll give it a stroke-dasharray of 350 because it's the highest one. And also I'm gonna use stroke-dashoffset of -100. That's gonna reduce that size just a little bit. And it's gonna rotate it in the direction that I want. So that is step number 2. Now, all I have to do is animate these circles. Or that was actually step number 1, excuse me. Step number 2 is to create the keyframe animation. So I'm gonna say keyframes. I'm gonna call this animation loader, and we'll start at 50%. And the reason we're doing that is that so the element can rotate back to its original position. And here I'm just gonna say transform rotate 360 degrees. That's all there is to it. Finally, we have to add or set that animation for the circles. So I'm gonna say page-loader circle. I'm gonna set the animation-name, which is loader. I'm gonna set the animation-duration to 4 seconds. I'm gonna set the animation-iteration-count to infinite, so the animation just keeps executing on and on. Then I'm gonna set an animation-timing-function to ease in and out. This is basically the easing function. And notice that we have a problem, it's not quite rotating as it should. And that's because the transform origin is off. So I'm gonna set transform-origin to center center or 50% 50%. So that's gonna allow the circles to rotate just like that. Now the only problem we see here is that the circles kind of rotate at the same time and maybe we want a little bit of delay for these. So let's go ahead and add that delay. So I'm actually going to copy this bit, And paste it in here because these are the selectors that we need to use. And I'm simply going to delete these lines. And I'm gonna add a different animation-delay for each individual circle. So for the first one I'm gonna go with -0.2 seconds, and I'm gonna copy this to the rest. And we'll go in 0.2 seconds increments, so it's gonna be -4, -6, and -8, right? So by doing that you can see that the circles are now rotating kind of individually. And why is it stopping? Let's see, iteration count infinite. Sorry, bit of a typo there. So as you can see, the circles are now rotating individually. And they just keep going, and going, and going creating a nice page loader. Again, how did we achieve this? Well, with the transform. So we're rotating each circle to 360 degrees. And we're starting the animation at 50%, so each circle will return to its original position. All right, and that was project number two via SVG page loader. Let's move on to project number three which is a card notification that appears and disappears on its own without using any kind of JavaScript. That's coming up, see you there.