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 –

We just need simple div to create this animation. For this animation we have used pseudo classes and a normal keyframe i…


This content originally appeared on DEV Community and was authored by Jatin Sharma

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>

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

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.


This content originally appeared on DEV Community and was authored by Jatin Sharma


Print Share Comment Cite Upload Translate Updates
APA

Jatin Sharma | Sciencx (2021-10-22T17:50:28+00:00) CSS Gradient Loading Animation. Retrieved from https://www.scien.cx/2021/10/22/css-gradient-loading-animation/

MLA
" » CSS Gradient Loading Animation." Jatin Sharma | Sciencx - Friday October 22, 2021, https://www.scien.cx/2021/10/22/css-gradient-loading-animation/
HARVARD
Jatin Sharma | Sciencx Friday October 22, 2021 » CSS Gradient Loading Animation., viewed ,<https://www.scien.cx/2021/10/22/css-gradient-loading-animation/>
VANCOUVER
Jatin Sharma | Sciencx - » CSS Gradient Loading Animation. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/22/css-gradient-loading-animation/
CHICAGO
" » CSS Gradient Loading Animation." Jatin Sharma | Sciencx - Accessed . https://www.scien.cx/2021/10/22/css-gradient-loading-animation/
IEEE
" » CSS Gradient Loading Animation." Jatin Sharma | Sciencx [Online]. Available: https://www.scien.cx/2021/10/22/css-gradient-loading-animation/. [Accessed: ]
rf:citation
» CSS Gradient Loading Animation | Jatin Sharma | Sciencx | https://www.scien.cx/2021/10/22/css-gradient-loading-animation/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts