Animated Gradient Color Spinner in CSS

In this project we are gonna build a loading spinner for your 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 in which we just rotate the div.So after that you can use it anywhere in your project. And let me know what do you think about it.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Gradient Color Spinner</title>
  <link rel="stylesheet" href="css/style.css">
</head>
    <h3>Animated Gradient Color Spinner</h3>
    <div class="loader"></div>
</body>
</html>

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

*{
  padding: 0;
  margin: 0;
  
}
body{
  width: 100vw;
  height: 100vh;
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #111;
}
h3{
  margin-bottom:20px;
  font-weight: normal;
  font-style: italic;
  font-size: 25px;
  color:white;
}
.loader{
  height: 300px;
  width: 300px;
  background: hsla(333, 100%, 53%, 1);
  background: linear-gradient(90deg, hsla(333, 100%, 53%, 1) 0%, hsla(33, 94%, 57%, 1) 100%);
  border-radius: 50%;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  position: relative;
  animation: spin 1.4s linear infinite;
}
.loader::before{
  position: absolute;
  content: "";
  height: 90%;
  width: 90%;
  background-color: #111;
  border-radius: 50%;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

@keyframes spin {
  to{
    transform: rotate(360deg);
  }
  
}

Animated Gradient Color Spinner in CSS

Source Code :

css/style.css

Output

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects