The Gradient Ring Loader using CSS is perfect for the dark mode website. It is a glowing gradient ring rotating 360 degrees. I created this loader while I was trying to create something else but created this one.

Also Read- Morphing Submit Button using CSS

How to create a gradient ring loader using CSS?

To create this, we will first divide this into separate pieces.

  • Create a circle
  • Create a background gradient
  • Create a Ring
  • Add the glow
  • Animate the ring

Create a Circle

First, we will have to create a circle. We can do this using CSS.

To create a circle we will first create an empty div

<div class="loader"></div>

Here this div has a class named loader. We will add some width and height to it and then make the border-radius 50%

.loader {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Create a gradient background

Now, we will create a gradient background for the circle.

To do that we will use a linear gradient as its background image

.loader {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: linear-gradient(45deg, red, blue);
}

Create a ring

To create a ring, we will add a small circle on top of it with the same background color as the body.

.loader {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: linear-gradient(45deg, red, blue);
  position: relative;
  z-index: 1;
}

.loader::before {
  content: "";
  width: 80px;
  height: 80px;
  background: var(--bg-color);
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
}

Here we used the ::before pseudo-element for the inner circle.

Learn more about CSS before and after pseudo elements.

Add the glow

To add the glow to the ring we can create another circle with the same background gradient and add the blur filter to it

.loader,
.loader::after {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: linear-gradient(45deg, red, blue);
  position: relative;
  z-index: 1;
  animation: rotate 2s linear infinite;
}

.loader::after {
  content: "";
  filter: blur(40px);
  display: block;
  position: relative;
  z-index: -1;
}

For the glowing circle, we used the ::after pseudo-element.

Learn more about CSS before and after pseudo elements.

Animate the ring

Finally, we will have to animate it. We can do that by using keyframes in CSS

@keyframes rotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

There you have it.

Here is the full CSS

:root {
  --bg-color: black;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg-color);
}

.loader,
.loader::after {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: linear-gradient(45deg, red, blue);
  position: relative;
  z-index: 1;
  animation: rotate 2s linear infinite;
}

.loader::after {
  content: "";
  filter: blur(40px);
  display: block;
  position: relative;
  z-index: -1;
}

@keyframes rotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

.loader::before {
  content: "";
  width: 80px;
  height: 80px;
  background: var(--bg-color);
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
}

The source code is available on Github.

If you find this post helpful then please share it with your friends.