If you prefer video over text then there is a YouTube video at the end of the article. Let's go step-by-step and build our loading animation.
Step-1: Setting up theme
Let's first set up the theme and position our animation.
<div class="loading"></div>
body {
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
background: midnightblue;
justify-content: center;
align-items: center;
}
.loading {
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: white;
}
The circle you see is for the reference, we will remove it later.
Step-2: Adding the dots
We will use box-shadow which will help us add more circles or dots without adding any extra div. We will position them around our previous circle.
.loader {
...
box-shadow:
0 -3em 0rgba(255, 255, 255, 1),
2.25em -2.25em rgba(255, 255, 255, 0.875),
3em 0 rgba(255, 255, 255, 0.75),
2.25em 2.25em rgba(255, 255, 255, 0.625),
0 3em rgba(255, 255, 255, 0.5),
-2.25em 2.25em rgba(255, 255, 255, 0.375),
-3em 0 rgba(255, 255, 255, 0.25),
-2.25em -2.25em rgba(255, 255, 255, 0.125)
;
}
We no longer need the first circle(background: white;), we can remove it.
Step-3: Animation
We just need to the div to keep rotating as per our need, which is a one-liner coder.
.loading {
...
animation: spin 1.2s linear infinite;
}
@keyframes spin {
100% { transform: rotate(-360deg) }
}
We have our single div loading status animation ready. Thank you for reading.
Please feel free to drop you opinion or any helpful tips.
Feel free to connect on Social Media: https://designingcoder.github.io
Top comments (2)
What's the meaning of vanilla CSS?
Vanilla CSS is just plain CSS, it does not refer to any particular CSS library like Bootstrap, Tailwind etc.