Quick CSS : Make infinity loading animation for your next website.

Hello, welcome. Today we'll see a quick CSS tutorial on how to make gradient loading animation.

Loading Animation

Wonder, how to make a loading animation ? Let's see how you can make one very easily.

Video Tutorial

Let's start

So, start with basic HTML structure. And after that, create a <div> with class loading-box it will contain our loader. And inside that, create another <div> with class loader.

<div class="loading-box">
    <div class="loader"></div>
</div>

And for styling first, give basic style.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fefefe;
}

.loading-box{
    position: relative;
    width: 400px;
    height: 50px;
    border-radius: 50px;
    border: 2px solid #ededed;
    overflow: hidden;
}

In above CSS, we are using flex box to center our loading box.

Output

Now, style loader.

.loader{

    width: 100%;

    height: 100%;

    position: absolute;

    border-radius: 50px;

    background: linear-gradient(45deg, #b6b5ff, #ff9797);

    left: 0%;

}

Output

You can see we are done with the loader, Now let's animate this. As you can notice, we have left property set to 0% change it to -100% and give animation.

.loader{

    left: -100%;

    animation: load 3s linear infinite;

}

@keyframes load{

    0%{

        left: -100%;

    }

    100%{

        left: 100%;

    }

}

Output

So, it's done. I hope you understood each and everything. If you have doubt or I missed some point let me know in the comments.

Articles you may found Useful

1. CSS Positions
2. CSS Media Query
3. CSS flex box

If you like, you can subscribe my youtube channel. I create awesome web contents. Subscribe

Thanks For reading.

Comments

[Rasmus Schultz]

I find this to be an incredibly misleading and annoying new trend in UI.

Progress bars are supposed to give an indication of the work remaining. If you can't do that, simply put, the progress bar is the wrong UI element. Just use a spinner - or something that is more clearly a spinner.

This is yet another one of those "perceived performance" tricks, like skeleton loaders - the effect of these will be short lived, since people will quickly learn that they don't mean what they used to mean.

You're tricking the user - nobody likes to be tricked, they will figure out what you're doing pretty soon, and it won't work anymore. At that point, progress bars won't mean what they used to mean, for tasks with a predictable delay. They won't mean anything at all. Just visual clutter and meaningless inconsistency.

These trends destroy the fundamentals of established visual language in UI.

Please don't. 😐

[Michael Mroz]

As a user, I appreciate judicious use of skeleton loading. I'm pissed if I have to see it for ages, but as long as I'm waiting, I like getting an indication of where things are going to be, and having reflow reduced when they render.

[Boyne]

Agreed.
Except for the part about skeleton loaders.

[kolajo]

This is pretty cool and creative way of doing thing. For those who disagree because process bar is for progress, let me remind you that infine progress exist everywhere, in OS, in apps etc. And the foundation of technology is innovation and creativity, you can't box anything with a single usage forever, change is inevitable. You have to get use to it.

Infact, I'm going to use this in the app I'm currently developing, and I'll like you to come and criticise it for me.

[Hussein AbdulQohar]

It's a great piece, however a progress bar should not be used to represent loading state. A spinner would be better suited for such instance.