In the world of web design, visuals can make or break user experience. One captivating way to enhance this experience is through creative loaders and animations. Today, we’re diving into a fantastic example of a planet loader built entirely with HTML and CSS. This loader isn’t just functional; it’s an eye-catching piece of art that adds flair to any website.
The Code Breakdown
Let’s explore the code step by step to understand how this celestial animation is crafted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SINGLR PLANET LOADER</title>
</head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #222229;
}
.planet {
display: block;
width: 125px;
height: 125px;
position: relative;
transform-style: preserve-3d;
border-radius: 50%;
background: rgb(252,201,107);
background: linear-gradient(
180deg,
rgba(252,201,107,1) 0%,
rgba(252,201,107,1) 15%,
rgba(247,174,1,1) 15%,
rgba(247,174,1,1) 19%,
rgba(252,201,107,1) 19%,
rgba(252, 201, 107, 1) 22%,
rgba(252, 201, 107, 1) 22%,
rgba(247, 174, 1, 1) 28%,
rgba(252, 201, 107, 1) 28%,
rgba(252, 201, 107, 1) 31%,
rgba(252, 201, 107, 1) 33%,
rgba(252, 201, 107, 1) 36%,
rgba(247, 174, 1, 1) 36%,
rgba(247, 174, 1, 1) 48%,
rgba(252, 201, 107, 1) 48%,
rgba(252, 201, 107, 1) 55%,
rgba(247, 174, 1, 1) 55%,
rgba(247, 174, 1, 1) 66%,
rgba(252, 201, 107, 1) 66%,
rgba(252, 201, 107, 1) 70%,
rgba(247, 174, 1, 1) 70%,
rgba(247, 174, 1, 1) 73%,
rgba(252, 201, 107, 1) 73%,
rgba(252, 201, 107, 1) 82%,
rgba(247, 174, 1, 1) 82%,
rgba(247, 174, 1, 1) 86%,
rgba(252, 201, 107, 1) 86%
);
box-shadow: inset 0 0 25px rgba(0,0,0,0.25),
inset 8px -4px 6px rgba(199,128,0,0.5),
inset -8px 4px 8px rgba(255,235,199,0.5),
inset 20px -5px 12px #f7ae01,
0 0 100px rgba(255,255,199,0.35);
transform: rotateZ(-15deg);
}
.planet::before {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 16px solid #7b6f42;
border-top-width: 0;
border-radius: 50%;
box-shadow: 0 -2px 0 #b1a693;
animation: rings1 0.8s infinite linear;
}
.planet::after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 8px solid #b1a693;
border-top-width: 0;
border-radius: 50%;
box-shadow: 0 -2px 0 #7b6f42;
animation: rings1 0.8s infinite linear;
}
@keyframes rings1 {
0% {
transform: rotateX(65deg) rotateZ(0deg) scale(1.75);
}
100% {
transform: rotateX(65deg) rotateZ(360deg) scale(1.75);
}
}
@keyframes rings2 {
0% {
transform: rotateX(65deg) rotateZ(0deg) scale(1.7);
}
100% {
transform: rotateX(65deg) rotateZ(360deg) scale(1.7);
}
}
</style>
<body>
<div class="planet"></div>
</body>
</html>
Understanding the Code
Basic HTML Structure
The HTML document starts with the standard <!DOCTYPE html> declaration, followed by the html, head, and body elements. The head contains meta tags for character encoding and viewport settings, along with a title.
Styling the Loader
a. body Styling
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #222229;
}
Flexbox Layout: Centers the loader both horizontally and vertically within the viewport.
Background Color: A dark background ensures that the loader stands out.
b. .planet Styling
.planet {
display: block;
width: 125px;
height: 125px;
position: relative;
transform-style: preserve-3d;
border-radius: 50%;
background: rgb(252,201,107);
background: linear-gradient(...);
box-shadow: inset 0 0 25px rgba(0,0,0,0.25);
transform: rotateZ(-15deg);
}
Size & Shape: The .planet class creates a circular div element with a gradient background that simulates the appearance of a planet.
Box Shadow: Adds depth and highlights different areas of the loader for a more realistic look.
Transformation: The rotateZ(-15deg) tilts the planet slightly, giving it a more dynamic appearance.
c. Animation with ::before and ::after Pseudo-elements
.planet::before, .planet::after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
border: ...;
border-radius: 50%;
box-shadow: ...;
animation: rings1 0.8s infinite linear;
}
Pseudo-elements: These are used to create the planetary rings.
Border and Box Shadow: Creates a layered effect that enhances the 3D illusion.
Animation: The rings1 keyframes animation rotates the rings around the planet, adding to the visual interest.
d. Keyframe Animations
@keyframes rings1 {
0% {
transform: rotateX(65deg) rotateZ(0deg) scale(1.75);
}
100% {
transform: rotateX(65deg) rotateZ(360deg) scale(1.75);
}
}
rings1 Animation: Rotates the rings to create a dynamic spinning effect.
rings2 Animation: Provides an alternative scaling animation that can be used if desired.
Conclusion
This “planet loader” demonstrates how powerful CSS is at producing intricate animations from comparatively basic code. Gradients, shadows, and keyframe animations can be used to turn a plain HTML element into a visually arresting element.
Play around with the options, altering the colors, sizes, and animation rates to fit the needs of your project. Your creativity is the only restriction while using CSS!
Please get in touch if you require more customisation or if you have any questions. Have fun with coding!
