<!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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.