Make Your Web Design Beautiful with pure CSS Animations

Make Your Web Design Beautiful with pure CSS Animations

Part 1: Creating our loading animation

This first part is going to focus on getting the loading animation together and seeing it on a static HTML website. The goal is to walk through actually creating the snippet. We’ll only use HTML and CSS for this part.

Step 1: Creating some sample content

To get started, we’ll want a little sample content. There’s really no restrictions here, you can create this with basic HTML and CSS or you can add this to your Create React App!

For the walk through, I’m going to use HTML and CSS with a few examples of content that will allow us to see this in effect.

To get started, create a new HTML file. Inside that HTML file, fill it with some content that will give us the ability to play with our animation. I’m going to use fillerama which uses lines from my favorite TV show Futurama!

If you’re going to follow along with me, here’s what my project looks like:

my-css-loading-animation-static
- index.html
- main.css

Follow along with the commit!

Step 2: Starting with a foundation loading class

For our foundation, let’s create a new CSS class. Inside our CSS file, let’s add:

.loading {
background: #eceff1;
}

With that class, let’s add it to a few or all of our elements. I added it to a few paragraphs, headings, and lists.

<p class="loading">For example...

That gives us a basic background, but we’d probably want to hide that text. When it’s loading, we won’t have that text yet, so most likely we would want to use filler text or a fixed height. Either way, we can set the color to transparent:

.loading {
color: transparent;
background: #eceff1;
}

If you notice with list elements, whether you apply the class to the top level list element ( <ol> or <ul> ) vs the list item itself ( <li> ), it looks like one big block. If we add a little margin to the bottom of all list elements, we can see a different in how they display:

li {
margin-bottom: .5em;
}

And now it’s starting to come together, but it kind of just looks like placeholders. So let’s animate this to look like it’s actually loading.

Follow along with the commit!

Step 3: Styling and animating our loading class

Before actually animating our class, we need something to animate, so let’s add a gradient to our .loading class:

.loading {
color: transparent;
background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%);
}

This is saying that we want a linear gradient that’s tilted at 100 degrees, where we start with #eceff1 and fade to #f6f7f8 at 30% and back to #eceff1 at 70%;

It’s hard to see initially when it’s still, it might just look like a glare on your computer! If you’d like to see it before moving on, feel free to play with the colors above to see the gradient.

Now that we have something to animate, we’ll first need to create a keyframes rule:

@keyframes loading {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}

This rule when applied will change the background position from starting at 100% of the x-axis to 0% of the x-axis.

With the rule, we can add our animation property to our .loading class:

.loading {
color: transparent;
background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%);
animation: loading 1.2s ease-in-out infinite;
}

Our animation line is setting the keyframe to loading , telling it to last for 1.2 seconds, setting the timing function to ease-in-out to make it smooth, and tell it to loop forever with infinite .

If you notice though after saving that, it’s still not doing anything. The reason for this is we’re setting our gradient from one end of the DOM element to the other, so there’s nowhere to move!

So let’s try also setting a background-size on our .loading class.

.loading {
color: transparent;
background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%);
background-size: 400%;
animation: loading 1.2s ease-in-out infinite;
}

Now, since our background expands beyond our DOM element (you can’t see that part), it has some space to animate with and we get our animation!