Moon Loading Animation Using CSS
Moon Loading Animation Using CSS

Moon loading Animation using CSS is developed by myself. It is a cool gradient-loading animation. It doesn’t take that much code and time yet it is a tricky one.

Table of Contents

Also, Read- Hamburger Menu in CSS

How to create a Moon Loading Animation using CSS?

Before we create let’s look at what we are going to archive in this article:

Click the play button at the top right corner in the below example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Moon Gradient loading Animation</title>
    <style>
      :root {
        --bg-color: black;
      }
      html,
      body {
        padding: 0;
        margin: 0;
        height: 400px;
      }
      body {
        background: var(--bg-color);
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .container {
        display: block;
        position: relative;
      }

      .text {
        color: white;
        text-align: center;
        margin-top: 40px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 50px;
      }

      .loader {
        height: 200px;
        width: 200px;
        border-radius: 100px;
        position: relative;
        background: linear-gradient(
          to right,
          #667db6,
          #7303c0,
          #ec38bc,
          #fdeff9
        );
      }

      .circle {
        background-color: var(--bg-color);
        height: 200px;
        width: 200px;
        border-radius: 100px;
        z-index: 3;
        transform-origin: 47% 50%;
        transform: rotate(45deg);
        position: relative;
      }

      .rotator {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        animation: rotate 2s infinite linear;
      }

      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="loader"></div>
      <div class="rotator">
        <div class="circle"></div>
      </div>
      <div class="text">Loading</div>
    </div>
  </body>
</html>

Step 1: HTML

First, we will start by creating a basic HTML structure for our page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
    <title>Moon Gradient loading Animation</title>
  </head>
  <body>
    <div class="container">
      <div class="loader"></div>
      <div class="rotator">
        <div class="circle"></div>
      </div>
      <div class="text">Loading</div>
    </div>
  </body>
</html>

In the above code, we created some div elements and linked our style.css file.

The first div element is a container for all the other div elements, The loader is a gradient circle and the rotator is the rotating element with the circle.

Step 2: CSS

Now, create the style.css file if you haven’t created it already.

I like to center things, we can do this by:

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  position: relative;
}

Here, we removed any unnecessary padding and margin, then centered elements with display type flex. We also set the position of the container to the relative.

Next, we need to create a gradient circle:

Here is the code for this circle

.loader {
  height: 200px;
  width: 200px;
  border-radius: 100px;
  background: linear-gradient(to right, #667db6, #7303c0, #ec38bc, #fdeff9);
}

In the above code, we created a circle named loader with 200 pixels height and width. We set the border radius to 100 pixels to make it a circle. We also used a linear gradient as the background of the circle.

Now to make it rotate while changing colors, we will make it look like it is rotating.

Let me show you an example:


As you can see in the example the circle above the loader is rotating. By setting the background color as the circle color we can make it look like the gradient circle is rotating. Try to change the circle color by clicking the “Change the color” button in the above example.

Here we will create the gray circle:

.circle {
  background-color: black;
  height: 200px;
  width: 200px;
  border-radius: 100px;
  z-index: 3;
  transform-origin: 47% 50%;
  transform: rotate(45deg);
}

Now, will make it rotate by animating it:

.rotator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  animation: rotate 2s infinite linear;
}

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

Now if we put everything together we can see our loading animation in action.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Moon Gradient loading Animation</title>
    <style>
      :root {
        --bg-color: black;
      }
      html,
      body {
        padding: 0;
        margin: 0;
        height: 400px;
      }
      body {
        background: var(--bg-color);
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .container {
        display: block;
        position: relative;
      }

      .text {
        color: white;
        text-align: center;
        margin-top: 40px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 50px;
      }

      .loader {
        height: 200px;
        width: 200px;
        border-radius: 100px;
        position: relative;
        background: linear-gradient(
          to right,
          #667db6,
          #7303c0,
          #ec38bc,
          #fdeff9
        );
      }

      .circle {
        background-color: var(--bg-color);
        height: 200px;
        width: 200px;
        border-radius: 100px;
        z-index: 3;
        transform-origin: 47% 50%;
        transform: rotate(45deg);
        position: relative;
      }

      .rotator {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        animation: rotate 2s infinite linear;
      }

      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="loader"></div>
      <div class="rotator">
        <div class="circle"></div>
      </div>
      <div class="text">Loading</div>
    </div>
  </body>
</html>

So, that’s it for this article. If you find this article helpful then please share it.

Source Code

The source code is available at Github.

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply