Sunday, February 18, 2018

Membuat Animasi Loading Dengan HTML Dan CSS

         1 comment  

Hai semuanya, pada tutorial kali ini, kita akan belajar membuat animasi loading dengan HTML dan CSS, baiklah, kita langsung saja belajar cara membuatnya.

Pertama, tulis syntax HTML seperti dibawah ini. 
<div class="container">
  <h1>Animasi Loading</h1>
  <div class="loader"></div>
</div>
Kedua, tambahkan syntax CSS, seperti dibawah ini. 
.container{
    width: 500px;
    margin: auto;
  }
  .loader{
    border: 30px solid #000;
    border-top: 30px solid #e92a2a;
    border-bottom: 30px solid #dbdf28;
    border-right: 30px solid #27c761;
    border-left: 30px solid #2082d2;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    margin: auto;
    animation: spin 2s linear infinite;
  }
  @keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
  }
Untuk melihat hasilnya, anda dapat melihatnya pada demo animasi loading dibawah ini.

See the Pen QZbdKJ by Karis Maulana (@karismaulana) on CodePen.

Demikian, cara membuat animasi loading dengan HTML dan CSS, menurut kalian, animasi loading sudah bagus atau tidak, kasih tau kami ya. Jika ada kesalahan, kekurangan atau hal hal lainnya, silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih.

Semoga Bermanfaat

1 comment: