DEV Community

Cover image for Quick CSS : Make infinity loading animation for your next website.
Modern Web
Modern Web

Posted on

66 16

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>


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

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

Output

Capture

Now, style loader.



.loader{
width: 100%;
height: 100%;
position: absolute;
border-radius: 50px;
background: linear-gradient(45deg, #b6b5ff, #ff9797);
left: 0%;
}

Enter fullscreen mode Exit fullscreen mode



Output

Capture-2

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%;
}
}

Enter fullscreen mode Exit fullscreen mode



Output

Untitled design (2)

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.

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

Top comments (5)

Collapse
 
mindplay profile image
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. 😐

Collapse
 
mjvmroz profile image
Michael Mroz • Edited

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.

Collapse
 
boyney profile image
Boyne • Edited

Agreed.
Except for the part about skeleton loaders.

Collapse
 
kolajo profile image
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.

Collapse
 
moyohussein_92 profile image
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.

Some comments have been hidden by the post's author - find out more

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay