Up next in 10
How To Create An Advanced Animated Loading Spinner
2K views
Feb 7, 2024
"How To Create An Advanced Animated Loading Spinner" is an instructional video that demonstrates the process of designing and implementing a sophisticated animated loading spinner for websites or applications. Viewers are guided through the creation of a loading spinner with intricate animations, transitions, and effects using HTML, CSS, and possibly JavaScript. The tutorial covers advanced CSS techniques such as keyframe animations, transforms, and gradients to achieve a visually appealing and dynamic loading spinner. Through clear demonstrations and explanations, viewers learn how to customize the appearance and behavior of the loading spinner to create a unique and engaging user experience. Whether you're a beginner or an experienced developer seeking to enhance your front-end development skills, this tutorial provides valuable insights into creating advanced animated loading spinners for your projects.
View Video Transcript
0:00
In this video, I'm going to show you how to use two different approaches to create essentially
0:03
the exact same loading spinner. The first approach is going to be very heavily focused on the HTML
0:08
So the CSS is going to be simple HTML, a little bit more complex. And the second approach is going to have dead simple HTML, but the CSS is going to be quite
0:15
a bit more complicated. So let's get started now. Welcome back to web dev simplified
0:23
My name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner
0:28
And as you can see on the right, we have our two different spinners. This top one is composed of three different sections, while this bottom one only has two sections
0:35
And you may actually recognize this top spinner if you've seen the channel for a while, because this is a spinner I actually created a tutorial on many years ago
0:41
Now lots of things have changed in CSS. So the code in this tutorial is going to be a lot more modern and up to date
0:46
But the idea from this came from that older tutorial. And this bottom spinner here you can see is a little bit simpler, but the HTML for the
0:52
spinner is so much simpler, which is why it's a little bit simpler looking
0:56
So let's come in here. We're going to create our HTML page, give it some boilerplate code
1:00
And then what I want to do is I want to create our spinner. So we're going to have our spinner and inside the spinner, we're going to have that text loading
1:06
The next thing that we want to have inside of our spinner is our different sectors. So we can say spinner sector, and we can say spinner sector red
1:16
So all I'm doing is creating three different sectors and I'm giving them each a distinct color
1:20
So let's do red, blue, and green. And they all share this spinner sector class, so we can style them all the same other than
1:28
the color based on this section right here. Also I want to create another spinner
1:32
This is going to be for our second spinner, and we're just going to call this spinner two, put the text loading in there, and that's all the HTML we need
1:38
So you can see the second spinner has much more simple HTML
1:42
Now let's get a style sheet linked up here. We're going to link a style sheet called styles.css
1:47
And we'll create that styles.css just like that. And the very first thing I like to do in every single one of my CSS style sheets is I like
1:55
to set up my box sizing on all my elements. So we can just say box sizing is going to be border box, and that'll make styling everything
2:01
a lot easier. Now the very first thing I want to do is I want to open this up with live server
2:05
So we can just right click on this, open with live server, as long as you have the live server extension installed
2:09
And as you can see, we just have two pieces of text that say loading. Really pretty straightforward
2:13
We don't have any styling yet, but we're going to get into that. So the first thing I want to do is I want to come in here and I want to style my actual
2:20
spinner itself. And the spinner is this first spinner we created right here
2:23
So we want to give it a specific size. So we're going to say like a width of 300 pixels and a height of 300 pixels
2:30
That's giving this a distinct size. And then I want to center the text inside that
2:34
So we can just say display flex, justify content center, and align item center
2:40
And what that's going to do is it's going to give me a box 300 by 300 and put this text
2:43
loading in the center of that. As you can see, I'm also going to increase my font size to like 2em, for example, just
2:49
to make it a little bit better. Let's make it 2rem. There we go. So now our text is slightly larger and a little bit easier to see
2:55
Now what we can actually do is go ahead and start focusing on the things that go around those little spinner sectors
2:59
But first, what I want to do is I want to make sure our overflow is hidden
3:03
We don't want to have anything come outside the spinner. So for example, when these sectors are doing circles around our spinner, as you can see
3:09
over here, we want to make sure that the actual box that is showing these doesn't actually
3:13
overlap outside of our container. Otherwise we're going to get some weird scrolling issues
3:17
That's the whole reason I have that overflow right there. So let's move back into over here and let's come down and get our spinner sector
3:25
Now we want to position our spinner sectors absolutely. So we're going to say we're going to do absolute positioning, which means we need to have a
3:31
position of relative set to our actual spinner. Now for each one of these, I want them to be the full size
3:37
So we'll say width and height are going to be 100%. So they're essentially going to fill the entire size of our spinner
3:43
If we just give it a background of red, for example, you can see we now have just three red squares stacked on top of each other, right
3:48
That are filling the full exact size of our spinner. Now obviously we want these to be circles
3:53
So we're going to say border radius is going to be 50% just like that
3:57
Now you can see we have a circle, which is exactly what we want. Now we want to actually give it a border so we can say our border is going to be 15 pixels
4:05
solid and let's just say black for now. Now you can see we have a black border going all the way around
4:10
And if we remove that red outline, you can see it's already starting to take shape
4:14
But the important thing is you can see over here, we have three different sections
4:18
Instead of one giant border, we have three parts of a border. So in order to make our border be parted, what we want to do is set the border to actually
4:25
be transparent. And then we can tell a different direction of our border to be a certain color
4:29
So we can say like border top left, I'm sorry, border top color is going to be red
4:35
And now if we come over here, you can see just the top portion of our border is red, or we could change it to left
4:40
And now just the left portion of our border is going to be red. So in order to make it so that we have three distinct sections, we can just select all
4:47
of our different spinner sectors. So we have our red one. I'm going to copy this down because we have a blue and a green one as well
4:55
So this is going to be blue, green, and then I can just copy that border left color into there
5:03
And for this one, I'm going to do light coral, just like that
5:07
Copy this down here and here. And for this blue one, I'm going to do light blue
5:14
And for the green one, I'm going to do light green. And the important thing to note is we don't want them to all be stacked on top of each other
5:21
We want them to be offset a little bit. So here I'm going to use border top for my red
5:24
I'm going to use border left for blue, and let's just do border right for green. So now you can see they're all offset from one another
5:30
Now all we need to do is get them to start spinning, and that's going to be essentially it
5:34
But one other important thing to note is if you look at this one, as the different layers overlap each other, you can see the color actually changes
5:40
So like when red and green overlap, we get yellow. And as you can see, when all three overlap, we get this like whitish color
5:45
To do that in CSS is actually incredibly easy. All we needed to do is we needed to change the mix blend mode, and we want to say overlay
5:53
so that the different colors are going to overlay over top of each other. So now if we say they're all going to be top, you can see we now get a different color when
6:00
they're overlaying. When we get two colors overlapping each other, you now see it turns yellow
6:04
And for example, when we have none of the colors overlapping each other, they all show their individual color
6:09
So by setting this mix blend mode to overlay, all we're doing is saying, hey, when two things
6:12
overlap each other, try to overlay the different colors together to get a brand new color
6:17
And that's going to give us the really cool effect you can see with our spinner here where they overlap each other and change around their color
6:22
And the only thing we really have left to do is actually create an animation that causes these to rotate
6:26
So we want to just create a simple animation on here. We're going to call it rotate
6:32
We're going to give it some duration, let's just say 150 milliseconds. We're going to give it a curve
6:36
We'll say like ease in out. And then finally, we're going to say we want this animation to repeat infinite number of times
6:42
Let's create some key frames for that rotate animation. And this animation is really straightforward
6:49
We'll just say at 0%, we're going to have some key frames for our transform rotate
6:54
which is going to be at zero. And then at 100%, we're going to do a transform, which is going to be a rotate
7:01
And this is going to be at 360 degrees. So it's just essentially going to rotate a full circle every single time
7:06
Now, if we click save, you can see that they are rotating in a full circle
7:10
Obviously, they're going way too fast. So let's try 1.5 seconds instead
7:14
Now you can see they're rotating in a full circle, but they're all rotating at the exact
7:18
same speed and with the exact same timing curve. So all we need to do to get them to overlap each other at just essentially random intervals
7:24
is change the speed and the timing curve for each one of our sectors
7:28
So we can come in here and say that our duration is going to be like 1.5 seconds and our timing
7:34
is going to be ease in out. And then we can use these CSS variables
7:39
So up here, I can say duration. And for our timing, I can say timing, just like this
7:46
There we go. So now you can see that our red version is working
7:51
If I copy this down to the blue and I change it, for example, to two seconds, and let's
7:54
just do ease in, you can now see that the blue and red are rotating and they're rotating
8:00
at different rates. So they randomly overlap each other. And finally, if we get the green rotating as well, we can change this to like 2.5 seconds
8:07
and we could change this to ease out. You can now see all three of them are rotating completely randomly, or at least it looks
8:13
random even though it's really pretty set in stone. So that gives you a random appearance to your loading screen, which is really cool
8:19
And the next thing I want to do, as you can see over here is our loading text fades in and out
8:23
I want to work on making our loading text fade in and out as well. So that's a pretty straightforward thing to do
8:28
Also you'll notice we can't actually select our loading text right now
8:31
The reason for that is these spinner sectors are actually taking our pointer event
8:35
So I want to set pointer events to none on these. So now I can select that loading text
8:39
So now let's make that actual text fade animation. So we're just going to say keyframes for text color
8:47
And this text color animation is going to be a little bit more complex. We're going to start out our animation with a color that is going to be RGBA of entirely black
8:57
So 0, 0, 0, 1. So 100% opacity, completely black. Then we're going to move down
9:02
Let's just say we're going to go to 25% of the way through our animation and we want to change this to 0.5
9:08
Then at 50% of the way through our animation, we're going to change the color here to 0.1
9:14
So this is our animation going one direction. Now we just need to reverse this to go the other direction
9:19
There are two ways that we could do this. First we could come in here and say at 75% we want this, and at 100% we want this
9:26
And that essentially reverses our animation back to where it started. If we come all the way up to our spinner and we give it an animation of text color
9:33
with a duration of let's just say two seconds. Timing function, we'll say ease in out
9:39
And we're going to come in here and make it be infinite
9:44
You'll see when I save that, that the text starts fading in and out. Now another way to do this is to say that we want to alternate our animation
9:52
So we set this to alternate and I come back over here, change this middle value to 50%
9:57
change this top value to 100% and remove this. Now we're going to get essentially the exact same animation
10:03
You can see it fades that 0.1 and it fades back out. Now you may have to adjust your timing curve if you want it to be exactly the same, but
10:10
essentially this is the way to do the exact same thing. Either approach works just fine
10:14
It's really up to you what you want. And with that little bit of code, we have the more complex HTML version done and overall
10:20
our CSS code is pretty straightforward. And if we want to add another sector that's going to be a different color, all we do is
10:25
just copy this down, change this to like sector yellow, change the color here to something
10:30
like yellow, and let's change this to three seconds and we'll use ease out still
10:34
And we can just come in here, copy this, paste down yellow
10:38
And now you can see we have four different circles going around the ring. So there's a lot of different ways you can customize this if you want
10:44
And that's a really great perk to this way of doing this. Now what I'm going to do is show you how I would create spinner two
10:49
I'm just going to comment out this first spinner for now. And spinner two is going to be very similar, but all of the code is going to be in the
10:55
CSS and the HTML, like I said, is super straightforward. So let's come into our styles here
10:59
I'm going to select that spinner too. And now the interesting thing about spinner two and spinner one is they're pretty much identical
11:07
I'm just going to copy down everything for our spinner. I'm going to paste it inside of our spinner to give it a quick save
11:13
And you can see our text already has that animation and it's doing exactly what we want
11:16
for our spinner. They're both the same size. So this makes sense. Now obviously I can't select like a spinner sector
11:22
So instead I want to select spinner two. I want to get the before element and I also want to get spinner two and I want to get
11:29
the after element. Now in order to actually style what we want to happen inside these sections for before
11:34
and after, they're going to be exactly the same as these sections for our red and for
11:38
our blue and so on. So I'm just going to copy down this blue section and I'm going to paste it inside of here
11:44
Same thing with our, let's just do green section. I'm going to paste that inside our after
11:49
Oops, there we go. And now I need to do is select both my spinner to before and my spinner to after
12:00
And this is where all my shared styles are going to go. This works exactly the same as my spinner sector
12:05
So I'm just going to copy all of that code. I'm going to paste it inside here. And the only thing I need to change is I need to give this an empty content attribute
12:13
That way it'll actually show up on the screen because before and after elements need this content attribute
12:17
Now if I save, you can see already I have this working and it's working just like the other example
12:21
But now my HTML is so much simpler and all of the complexity is inside of my CSS
12:27
Obviously the downside to this approach though, is you can only have two elements because
12:31
with CSS pseudo elements, you can only have a before and an after. There's no way to have like a second before or a second after element
12:38
Now if you enjoyed this video, you're going to love my video on how to create custom check boxes in CSS
12:43
That's going to be linked over here. Also if you're unfamiliar with pseudo elements, I have a full tutorial covering those linked
12:48
over here as well. With that said, thank you very much for watching and have a good day