Hello Coders! Welcome to CSS Animation Blog. In this, we're going to see how to create a Loader which looks like a comet😍. I'm sure you're excited as soon as you heard the word comet. Well it is exciting and at the same time feels great when you're creating. Just some simple CSS does this magic. No need to deep dive into CSS. Begineers can also understand this. And also you can use this preloader in your websites as well.
Here's a preview-
That being said, let us get started.
Step - 1: Like always, create 2 files - index.html and style.css.
Step - 2: Copy the below HTML code and paste it into your code editor.
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Comet Loader</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="loader">
<div class="comet">
<div class="circle"></div>
</div>
<div class="comet">
<div class="circle"></div>
</div>
</div>
</body>
</html>
Step - 3: Below is the CSS code for styling.
CSS
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #1f1f1f;
}
.loader {
width: 20em;
height: 20em;
font-size: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.loader .comet {
position: absolute;
border-radius: 50%;
border-style: solid;
animation: animate 3s linear infinite;
}
.loader .comet:nth-child(1) {
width: 100%;
height: 100%;
color: gold;
border-color: currentColor transparent transparent currentColor;
border-width: 0.2em 0.2em 0em 0em;
--deg: -45deg;
animation-direction: normal;
}
.loader .comet:nth-child(2) {
width: 70%;
height: 70%;
color: lime;
border-color: currentColor currentColor transparent transparent;
border-width: 0.2em 0em 0em 0.2em;
--deg: -135deg;
animation-direction: reverse;
}
.loader .comet .circle {
position: absolute;
width: 50%;
height: 0.1em;
top: 50%;
left: 50%;
background-color: transparent;
transform: rotate(var(--deg));
transform-origin: left;
}
.loader .comet .circle::before{
position: absolute;
top: -0.5em;
right: -0.5em;
content: '';
width: 1em;
height: 1em;
background-color: currentColor;
border-radius: 50%;
box-shadow: 0 0 2em,
0 0 4em,
0 0 6em,
0 0 8em,
0 0 10em,
0 0 0 0.5em rgba(255, 255, 0, 0.1);
}
@keyframes animate{
to{
transform: rotate(1turn);
}
}
And that's it. You're done.
Let me know in the comments if you have any doubt related to this.
Follow @creocodigo for more projects and web related content.
If you find this useful, below are some other posts that I am sure you'll love