Preloader HTML & CSS Style 1

Posted in Preloader on May 11, 2020 by Sugeng Sulistiyawan ‐ 1 min read

Preloader HTML & CSS Style 1.

Very Simple Loader use HTML & CSS only.

CSS

#preloader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #d50000;
}

#preloader > .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 146px;
  padding: 16px 40px;
  transform: translate(-50%, -50%);
}

#preloader > .loader > .dot,
#preloader > .loader > .dots > span {
  width: 24px;
  height: 24px;
  background-color: #fff;
}

#preloader > .loader > .dot {
  position: absolute;
  animation: dot 1.2s infinite;
  transform: translateX(0);
}

#preloader > .loader > .dots {
  animation: dots 1.2s infinite;
  transform: translateX(32px);
}

#preloader > .loader > .dots > span {
  display: block;
  float: left;
  margin-left: 8px;
  margin-right: 8px;
}

/* animation */
@keyframes dot {
  50% {
    transform: translateX(120px);
  }
}

@keyframes dots {
  50% {
    transform: translateX(-8px);
  }
}

HTML

<div id="preloader">
  <div class="loader">
    <span class="dot"></span>
    <div class="dots">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>