The purpose of this article is to share how I solved this problem. Copying/pasting each block of code will not work.
Let's have fun with CSS !
👋 This morning I gave me a challenge : making a custom spinner only with HTML and CSS (JS is allowed but only for creating a module for reusability)
💼 My objective was to animate the logo of Pit, the company in which I'm involved.
First of all, the mockup
💡 I had a general idea of what I wanted to do, so I decided to draw each step of the animation.
% Percentages you can see are the progression of the animation. Each frame lasts a different duration.
⏰ Here is the final timeline , with mathematics for calculating some areas (thank you Pitagore)
Do you need a translation of the timeline ?
- 0% -> 10% : Increased logo size
- 10% -> 15% : Appearance of the square n°2 (left one)
- 15% -> 20% : Appearance of the square n°3 (top one)
- 20% -> 25% : Appearance of the square n°1 (right one)
- 25% -> 35% : Appearance of the "addons", small squares next to each big square
- 35% -> 90% : Rotation (because it's a spinner !)
- 90% -> 100% : Decreased logo size
Can you imagine the result ?
Now, let's code !
🏛 For the HTML, I wanted to have the small import possible of the spinner, because I can imagine use it for projects later.
I wrote the HTML first and forbade myself to edit it, because that's what I wanted it to look like.
<div
id="pit-loader"
data-color="#E9AE24"
data-size="150"
data-duration="3s">
</div>
👨💻 Now, a pinch of JavaScript, I split the logo by 4 (yes, there are 4 squares).
const squareCount = 4;
for (var i = 0; i < squareCount; i++) {
var squareNode = document.createElement("div");
squareNode.classList.add("pit-square");
loader.appendChild(squareNode);
}
I used this way to keep the call of the spinner in HTML as simple as possible.
👩🎨 The core of the animation is in the CSS.
The logo is composed by 4 squares, and for each square, another small square. The logo is easy to reproduce, that's why I draw it in CSS
#pit-loader {
position: absolute;
display: flex;
flex-wrap: wrap;
gap: calc(var(--gap) * 1px);
width: calc(var(--canvas) * 1px);
height: calc(var(--canvas) * 1px);
transform: rotate(225deg);
}
.pit-square {
position: absolute;
width: calc(var(--square) * 0.4px);
height: calc(var(--square) * 0.4px);
border: calc(var(--square) * 0.3px) solid var(--primary);
}
.pit-square::after {
content: "";
position: absolute;
width: calc(var(--square) * 0.3px);
height: calc(var(--square) * 0.3px);
background-color: var(--primary);
bottom: calc(var(--square) * 0.4px);
right: calc(var(--square) * 0.4px * 2);
}
Basically, this creates the logo you see before, nothing is relevant here.
🎞 To animate the logo, I used CSS Keyframes (Who guessed it ?) And it's now my split with percentages is useful !
🏞 When we focus on the whole logo, the "only" animation is the size and the spinning, that's it !
@keyframes loader {
0% {
opacity: 0;
transform: scale(0);
}
10% {
opacity: 1;
transform: scale(1);
}
35% {
transform: rotate(225deg);
}
80% {
transform: rotate(-135deg);
opacity: 1;
}
100% {
transform: rotate(-135deg) scale(0);
opacity: 0;
}
}
🤔 However the difficulty is the animation of the 4 squares, because I wished every square to appears after the previous one. So I created 4 keyframes
/* Animation of the right square */
@keyframes square-1 {
0% {
opacity: 0;
right: 0;
}
20% {
opacity: 0;
right: 0;
}
25% {
opacity: 1;
right: calc((var(--square) + var(--gap)) * 1px);
}
}
/* Animation of the left square */
@keyframes square-2 {
0% {
opacity: 0;
left: 0;
}
10% {
opacity: 0;
left: 0;
}
15% {
opacity: 1;
left: calc((var(--square) + var(--gap)) * 1px);
}
}
/* Animation of the top square */
@keyframes square-3 {
0% {
opacity: 0;
top: 0;
}
15% {
opacity: 0;
top: 0;
}
20% {
opacity: 1;
top: calc((var(--square) + var(--gap)) * 1px);
}
}
/* Animation of the bottom square */
@keyframes square-4 {
0% {
opacity: 0;
}
10% {
opacity: 1;
}
}
➕ Finally the "addon" square is so easy
@keyframes addon {
0% {
opacity: 0;
}
25% {
opacity: 0;
right: 0;
}
35% {
opacity: 1;
right: calc(var(--square) * 0.4px * 2);
}
}
➡️ To give a specific keyframe to each square, I used the nth-child() way. Example for the right square.
.pit-square:nth-child(1) {
top: calc(var(--square) * 1px + var(--gap) * 1px);
animation: var(--animation-duration) ease-in infinite square-1;
}
⏮ I talked before of data-attributes, I discovered them in this project, so here is a small explanation.
In HTML, we can add data-* attribute to any component, and retrieve them back in JS.
var loader = document.getElementById("pit-loader");
var color = loader.getAttribute("data-color");
loader.style.setProperty("--primary", color);
It makes my head spin !
🥁 Drum roll ... the final result ... TADA!
Top comments (0)