DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for CSS Gradient Loading Animation
Jatin Sharma
Jatin Sharma

Posted on

CSS Gradient Loading Animation

In this article we are gonna build a loading spinner for you website stay tuned for that first let's look what are we building -

preview

We just need simple div to create this animation. For this animation we have used pseudo classes and a normal keyframe in which we just rotate the div.

HTML

<div class="loader"></div>
Enter fullscreen mode Exit fullscreen mode

CSS

.loader {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 10rem;
  border: 3px solid white;
  background: linear-gradient(#eb31b0, #e4c352, #7df8d6);
  box-shadow: 0px 0px 100px -50px black;
  animation: animate 1s linear infinite;
}

.loader::before {
  position: absolute;
  content: "";
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  border-radius: 10rem;
  border: 3px solid white;
  box-shadow: inset 0px 0px 100px -70px #111;
}

@keyframes animate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
Enter fullscreen mode Exit fullscreen mode

Codepen is Here

Conclusion

So after that you can use it anywhere in your project. And let me know what do you think about it. If you like it then consider a follow.

Top comments (5)

Collapse
 
tracygjg profile image
Tracy Gilmore

Suggestion: It might be better setting the border-radius in both selectors to 50% so they are relative to the size of the element.

Collapse
 
j471n profile image
Jatin Sharma

Yeh that's also right.

Collapse
 
ats1999 profile image
Rahul kumar

Cool man

Collapse
 
harsvnc profile image
Hrn Svncใƒใƒซใƒณ

Awesome!

Collapse
 
iceorfiresite profile image
Ice or Fire

Very cool

Let's team up together ๐Ÿค

We're Hiring

We're hiring for a Senior Full Stack Engineer to join the DEV team. Want the deets? Head here to learn more about who we're looking for.