CSS Simple Loading Screen

0
329

Kali ini saya membuat loading simple dengan kode HTML dan CSS. Hanya dengan HTML dan CSS kita dapat membuat loading screen yang bisa dibilang kekinian sebenarnya yang saya buat kali ini hanya dasar, anda bisa mengembangkan sendiri dengan kode yang ada ditutorial ini.

PERSIAPAN

Buatlah folder simple loading untuk menyimpan file index.html dan style.css

Siapkan text editor yang biasa anda gunakan.

MEMBUAT HALAMAN UTAMA

Tulislah kode html berikut dan simpan file dengan nama index.html

<!DOCTYPE html>
<html>
<head>
  <title>Simple Loading</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h2 class="animasi">Please Wait ... </h2>
</body>
</html>

 

Tampilan dari kode diatas adalah sebagai berikut.

Selanjutnya kita buat file baru dan tuliskan kode css berikut ini. Lalu buat folder css lalu simpan kode css ini di dalam folder css dengan nama style.css

@keyframes load {
  0%{
    opacity: 0.08;
/*font-size: 10px; 
font-weight: 400; */
    filter: blur(5px);
    letter-spacing: 3px;
  }
  100%{
    /* opacity: 1px;
    font-size: 12px;
    font-weight: 600;
    filter: blur(0); */
  }
}

.animasi {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: auto;
  /* width: 350px;
  font-size:26px; */
  font-family: Helvetica, sans-serif, arial;
  animation: load 1.2s infinite 0s ease-in-out;
  animation-direction: alternate;
  text-shadow: 0 0 1px white;
}
body, html {
  height: 96vh;
  background-color: black;
  color: white;
}

 

Maka setelah semua kode sudah ditulis buka file index.html dengan browser tampilan nya akan seperti berikut:

Nah sekarang anda sudah berhasil membuat loading yang keren. Selamat belajar.

Terima Kasih telah membaca.

***PIU***

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here