Halo temen-temen, kembali lagi dengan saya. Konten kali ini merupakan animasi loader sederhana menggunakan HTML dan CSS saja.

Di sini untuk text editornya saya menggunakan Visual Studio Code serta Firefox sebagai browsernya.

Untuk temen-temen yang kepo tentang konfigurasi dan extensi VS Code yang saya pakai silakan klik sitasi di bawah ini.

Full Konfigurasi & Ekstensi VS Code Saya
Tampilan Preloader

DEMO

https://www.diefind.com/demo/loader-1

Berikut untuk script lengkapnya dan jika ada yang belum jelas bisa menonton videonya di atas.

index.html

/index.html
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Very Simple Loader #Preloader #1</title>

    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #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);
        }
      }
    </style>
  </head>
  <body>
    <div id="preloader">
      <div class="loader">
        <span class="dot"></span>
        <div class="dots">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
  </body>
</html>

Semoga Bermanfaat …