<!DOCTYPE html>
<html>
<head>
<link rel = 'stylesheet' type = 'text/css' href = 'index.css'>
<script src = 'index.js' defer></script>
</head>
<body>
<div class = 'loader'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class = 'reference'><a href = 'https://dribbble.com/shots/14914296-Loading'>Source of Inspiration</a></div>
</body>
</html>
:root {
--dot-one: #eb68a7;
--dot-two: #fdb7c1;
--dot-three: #fef490;
--dot-four: #d1b3eb;
--dot-five: #b3ebd6;
--reference: #2cff10;
--reference-hover: #87ff77;
--black: #000000;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--black);
width: 100vw;
height: 100vh;
overflow: hidden;
}
.loader {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 70%;
}
div > div {
width: 23px;
height: 23px;
border-radius: 50%;
margin: 8px;
}
div > div:nth-child(1) {
background-color: var(--dot-one);
}
div:nth-child(2):not(.reference) {
background-color: var(--dot-two);
}
div:nth-child(3):not(.loader) {
background-color: var(--dot-three);
}
div:nth-child(4):not(.reference) {
background-color: var(--dot-four);
}
div:nth-child(5) {
background-color: var(--dot-five);
}
.reference {
position: absolute;
align-self: flex-end;
background-color: none !important;
}
a {
color: var(--reference);
outline: none;
text-decoration: none;
}
a:hover {
color: var(--reference-hover);
}
@keyframes loader-rotate-up {
0% {
transform: rotate(0deg);
}
5% {
transform: rotate(90deg);
}
95% {
transform: rotate(90deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes loader-rotate-down {
0% {
transform: rotate(0deg);
}
5% {
transform: rotate(-90deg);
}
95% {
transform: rotate(-90deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes blink-animation {
0% {
}
25% {
visibility: hidden;
}
50% {
}
75% {
visibility: hidden;
}
100% {
}
}
@keyframes resize-animation-one {
0% {
height: 23px;
}
25% {
height: 140px;
border-radius: 15px;
}
50% {
height: 23px;
}
75% {
height: 140px;
border-radius: 15px;
}
100% {
height: 23px;
}
}
@keyframes resize-animation-two {
0% {
height: 23px;
}
25% {
height: 70px;
border-radius: 15px;
}
50% {
height: 23px;
}
75% {
height: 70px;
border-radius: 15px;
}
100% {
height: 23px;
}
}
@keyframes resize-animation-three {
0% {
height: 23px;
}
25% {
height: 200px;
border-radius: 15px;
}
50% {
height: 23px;
}
75% {
height: 200px;
border-radius: 15px;
}
100% {
height: 23px;
}
}
const dot_one = document.querySelector("div > div:nth-child(1)");
const dot_three = document.querySelector("div > div:nth-child(3)");
const dot_five = document.querySelector("div > div:nth-child(5)");
const dot_two_four = document.querySelectorAll("div > div:nth-child(even)");
const loader = document.querySelector(".loader");
setInterval(() => {
let dot_one_blink_animation = dot_one.style.animation;
if (!dot_one_blink_animation.includes("blink-animation")) {
dot_one.style.animation = "blink-animation 0.5s infinite 0s";
dot_five.style.animation = "blink-animation 0.5s infinite 0.2s";
} else {
dot_one.style.animation = "none";
dot_five.style.animation = "none";
}
let dot_two_blink_animation = dot_two_four[0].style.animation;
if (!dot_two_blink_animation.includes("blink-animation")) {
dot_two_four[0].style.animation = "blink-animation 0.5s infinite 0.06s";
dot_two_four[1].style.animation = "blink-animation 0.5s infinite 0.16s";
} else {
dot_two_four.forEach((el) => {
el.style.animation = "none";
});
}
let dot_three_blink_animation = dot_three.style.animation;
if (!dot_three_blink_animation.includes("blink-animation")) {
dot_three.style.animation = "blink-animation 0.5s infinite 0.12s";
} else {
dot_three.style.animation = "none";
}
}, 1000);
setInterval(() => {
let loader_rotate_up = loader.style.animation;
if (!loader_rotate_up.includes("loader-rotate-up")) {
loader.style.animation = "loader-rotate-up 3s ease-out 1s";
} else {
loader.style.animation = "none";
}
}, 4000);
setInterval(() => {
let loader_rotate_down = loader.style.animation;
if (!loader_rotate_down.includes("loader-rotate-down")) {
loader.style.animation = "loader-rotate-down 3s ease-out 1s";
} else {
loader.style.animation = "none";
}
}, 8000);
setInterval(() => {
let dot_one_animation = dot_one.style.animation;
if (!dot_one_animation.includes("resize-animation-one")) {
dot_one.style.animation = "resize-animation-one 1s 0.2s";
dot_five.style.animation = "resize-animation-one 1s 0.2s";
} else {
dot_one.style.animation = "none";
dot_five.style.animation = "none";
}
let dot_two_animation = dot_two_four[0].style.animation;
if (!dot_two_animation.includes("resize-animation-two")) {
dot_two_four.forEach((el) => {
el.style.animation = "resize-animation-two 1s 0.3s";
});
} else {
dot_two_four.forEach((el) => {
el.style.animation = "none";
});
}
let dot_three_animation = dot_three.style.animation;
if (!dot_three_animation.includes("resize-animation-three")) {
dot_three.style.animation = "resize-animation-three 1.2s 0.2s";
} else {
dot_three.style.animation = "none";
}
}, 3000);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.