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.
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.
