Cara Membuat Loading Saat Membuka Website

Cara Membuat Loading Saat Membuka Website

Saat membuka website terkadang kita melihat ada loading pada web tersebut.

Tujuanya adalah untuk membuat animasi selagi website tersebut dimuat.

Loading tentunya memiliki manfaat salah satunya dalam user experience.

Hasil akhirnya kira-kira akan seperti berikut.

Hasil Akhir

Langsung saja berikut caranya.

Membuat File HTML

Buat sebuah file HTML, lalu buat dua buah div untuk loadingnya.

<div class="loader">
 <div class="loading"></div>
</div>

Mengatur CSS

Lalu kita atur loadingnya dengan css.

Saya akan mengatur class loader sebagai wadahnya, dan kita mengatur supaya loadernya berada di tengah.

.loader{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

Lalu kita atur class loading sebagai loadingnya.

.loading{
 width: 50px;
 height: 50px;
 border-radius: 100%;
 border: 8px solid #ddd;
 border-top-color: #EE3D48;
 animation: putar 2s linear infinite;
}

Lalu kita buat sebuah keyframes sebagai animasinya

@keyframes putar{
 from{
   transform: rotate(0deg);
 }
 to{
   transform: rotate(360deg);
 }
}

Save lalu coba buka di browser.

Loading

Source Code

Berikut source codenya

<!DOCTYPE html>
<html>
<head>
  <title>Loading</title>
  <style>
    body{
      margin: 0;
    }
    .loader{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .loading{
      width: 50px;
      height: 50px;
      border-radius: 100%;
      border: 8px solid #ddd;
      border-top-color: #EE3D48;
      animation: putar 2s linear infinite;
    }
    @keyframes putar{
      from{
        transform: rotate(0deg);
      }
      to{
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="loader">
    <div class="loading"></div>
  </div>
</body>
</html>

Untuk javascriptnya bisa anda tambah-tambah sendiri.

Sekian dari saya semoga bermanfaat.

Related Post

Comments

X