m-loader-01

by Nic Fontaine

HTML

<div class="loader-icon">
  <div class="d-01"></div>
  <div class="d-02"></div>
  <div class="d-03"></div>
</div>

CSS

.loader-icon {
  position: fixed;
  right: 0; left: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  opacity: 0;
  animation: fadeIn 0.4s 1 forwards;
}

.loader-icon div {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: pink;
  margin: 0 0.2rem;
  transform: translateY(-1rem);
  /* transition: all 0.4s; */
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.loader-icon .d-01 {
  background: #ff615c;
  animation: ld01 0.9s -0.9s ease-in-out infinite forwards;
}

.loader-icon .d-02 {
  background: #ffd670;
  animation: ld01 0.9s -0.6s ease-in-out infinite forwards;
}

.loader-icon .d-03 {
  background: #6e4aff;
  animation: ld01 0.9s -0.3s ease-in-out infinite forwards;
}

@keyframes ld01 {
  0% { transform: translateY(0); }
  50% { transform: translateY(-2rem); }
  100% { transform: translateY(0); }
}

.loader-icon.done div {
  /* animation-iteration-count: 1; */
  animation: none;
  transform: translateY(-1rem);
}

JavaScript

const i = document.getElementsByClassName("loader-icon")[0]
document.addEventListener("click", function() {
	i.classList.toggle("done")
})