h1 Loading
  div.dots
    span.dot.z
    span.dot.f
    span.dot.s
    span.dot.t
      span.dot.l

a(href="https://twitter.com/AbubakerSaeed96", rel="nofollow noreferrer", target="_blank", class="abs-twitter")
  svg(viewBox="0 0 32 32", height="28px", class="twitter-icon")
    path(fill="#1da1f2", d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z")

// FONT
// =====================================
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap');

// DEFAULT
// =====================================
body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 2px;
  box-sizing: border-box;
  overflow: hidden;
}


// MAIN
// =====================================
h1 {
  font-family: 'Open Sans', -apple-system, 'Segoe UI', sans-serif;
  font-size: 50px;
  font-weight: bold;
  color: hsl(0, 0%, 13%);
  box-sizing: border-box;
}

.dots {
  display: inline-flex;

  &--animate .dot {

    &.z {
      animation: scale .8s .2s forwards;
    }

    &.f,
    &.s {
      animation: right .5s forwards;
    }

    &.l {
      animation: rightDown .4s .1s forwards linear, drop 2s .4s forwards linear;
    }

  }
}

.dot {

  & {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: hsl(0, 0%, 13%);
    border-radius: 10px;
    position: relative;
    margin-left: 6px;
  }

  &.z {
    position: absolute;
    transform: scale(0);

    @keyframes scale {
      100% {
        transform: scale(1);
      }
    }
  }

  &.f,
  &.s {
    transform: translateX(0px);

    @keyframes right {
      100% {
        transform: translateX(16px);
      }
    }
  }

  &.t {
    background: transparent;
  }

  .l {
    margin-left: 0;
    position: absolute;
    top: 0;
    left: 0;

    @keyframes rightDown {

      50% {
        top: 4px;
        left: 16px;
      }

      100% {
        top: 12px;
        left: 24px;
      }
    }

    @keyframes drop {
      100% {
        transform: translate(70px, calc(35px + (100vh/2)));
      }
    }
  }

}


// ABS
// =====================================
.abs-twitter {

  & {
    position: fixed;
    right: calc(24px + .6vw);
    top: calc(22px + .6vw);
    transform: translate(-8px, 4px);
    opacity: 0;
    transition: .3s ease-in;
  }

  &--show {
    transform: translate(0, 0);
    opacity: 1;
    animation: birdie 1s .8s linear infinite;
  }

  @keyframes birdie {
    13% {
      transform: rotate(14deg);
    }

    26% {
      transform: rotate(28deg)
    }

    100% {
      transform: rotate(0deg)
    }
  }

}

// By @AbubakerSaeed96 (Twitter)
// ===================

// Inspiration:
// Oleg Frolov's dribbble shot: https://dribbble.com/shots/5331825-Loading-XXI

// I thought making this would be easy ...but boy 😩

// Thank You For Viewing!
// Say 👋🏻 or hire me 👉🏻 abubaker.saeed.1996@gmail.com
// ================================================================

// Helper(s)
// =========
let $ = (e) => document.querySelector(e);

// Dots
// ====
let dots = $(".dots");

// Function
// ========
function animate(element, className) {
  element.classList.add(className);
  setTimeout(() => {
    element.classList.remove(className);
    setTimeout(() => {
      animate(element, className);
    }, 500);
  }, 2500);
}

// Execution
// =========
animate(dots, "dots--animate");

// Professional Abubaker ;P
// =====================
const twitter = $(".abs-twitter");
window.addEventListener(
  "mousemove",
  () => twitter.classList.add("abs-twitter--show"),
  { once: true }
);