Build a Fluid Loading Animation in CSS

Let's make a cool loading animation like this one. You can see that we have three different types of components. The first one is the roll. You can see that we have an inner box that is filling up, and you can also see a bordered box here.

I have a basic document set up. Now, let's start making our container, first. Inside the container, we'll have a loading screen, and we'll call it as the loading box. Inside the loading box, we'll have a loading inner box.

We can start styling our loading screen. We'll add a style tag into our head tag, and we'll add a background property to the body. We'll give the background property of coral. Now, if we save and refresh our loading screen, you can see that we have a background of coral.

Let's start styling our loading box. We'll give it a margin of 250 pixels so that it's nice and centered on this page. Let's give it a height of 75 pixels, and also a width of 75 pixels. Also, we'll give it a border, a width of 10 pixels, border style of solid, and the color will be white. If you save and refresh this, you can see that we have a nice, little box here.

Let's make a style for the loading inner box. We'll add in the loading inner box style. We'll give it a background color of white, and also, we'll give it a height of, say, 20 pixels. If we save this, you can see that the inner box is occupying space from the top to bottom.

We can quickly fix this by rotating the whole box by 180 degrees. Let's go ahead and do this. Let's add in a transfer, rotate by 180 degrees. Now, you can see that the box starts from the bottom. Now, all we need to do is animate this side over a period of time. For that, we'll make a keyframe animation.

We'll start with the keyword keyframes, and we'll call it fill. We'll start with the zero percent, and we'll give it a height of zero pixels. If you remember, we have a total height of 75 pixels. Let's make copies of this, and animate it over a period of time.

Let's animate it at 40 percent, 60 percent, and 100 percent. At 40 percent, we'll say that it occupies the whole 75 pixels, and it will stay for the whole 75 pixels until 60 percent of the animation. At 100 percent, it will again go back to zero.

To add it to our loader inner box, we'll use the keyword animation, and then we'll specify the keyframe fill, and then we'll give it a time of two seconds, easing function of ease in. We'll also specify that it is an infinite transition. If we save this, and check our browser, you can see that we are smoothly animating the box's side up and down.

We'll now add in the roll animation. Let's copy this whole template, and rename it as roll. We'll start animating our transforms here. We'll rotate it by 180 degrees at zero percent. We'll take the same, and also say that it will be the same 180 degrees at 40 percent.

For the 60 percent, we'll make sure that it has transitioned to a 360 degrees state, and we'll keep it at the same state of 360 degrees at 100 percent. We will go ahead and add this animation to our loading box.

We'll use animation, and we'll specify roll. We'll give it a transition time of two seconds. We'll say that it's infinite, and we'll use an easing function of ease out. If we save, and check our browser, you can see that we have a nice, little roll animation, and also, an up and down animation.