Membuat Efek Loading Dengan CSS3

Hallo teman-teman, tertemu lagi pada tutorial dumet school, pada tutorial kali ini kita akan belajar bagaimana cara Membuat Efek Loading Dengan CSS3,
seperti yang kita tahu, efek loading seperti ini biasa digunakan saat kita mereload atau merefresh suatu halaman.

Kebanyakan orang yang tidak mau pusing dengan bagaimana cara membuatnya menggunakan jquery sebagai alternatifnya, namun pada kali ini kita akan buat sebuah efek loading dengan CSS dengan kata lain pure CSS.

Oke kita langsung saja praktek, silahkan teman-teman buat sebuah file HTML dan ketikan script berikut :

<!DOCTYPE html>
<html>
<head>
</head>
<body>

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

</body>
</html>

Saya membuat sebuah div dengan class loading dimana nanti div inilah yang akan kita atur nantinya,

sekarang coba tambahkan script css berikut :

<style>
.loading {
  border: 16px solid #D44738;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

Sehingga keseluruhan scriptnya seperti berikut:

<!DOCTYPE html>
<html>
<head>
<style>
.loading {
  border: 16px solid #D44738;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 50px;
  height: 50px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>

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

</body>
</html>

Sehingga jika teman-teman save maka hasilnya akan seperti berikut :

warna biru akan terus berputar karena saya memberikan efek

animation: spin 2s linear infinite;

Pada CSSnya tadi, oke teman-teman cukup swekian dulu tutorial kali ini, semoga bermanfaat, terimakasih.

Kategori