Tutorial Cara Membuat Animasi Loading Keren Menggunakan Html Dan Css


Oke, pada kesempatan kali ini kami akan kembali membagikan sebuah tutorial animasi loading keren. Ini cukup bagus jika digunakan pada web atau blog Anda, ringan dan ini tidak akan menghambat waktu laju pemuatan halaman Anda nantinya.

Tutorial cara membuat animasi loading keren menggunakan html dan css

Sebelumnya ini sudah saya coba dan hasilnya pun berjalan (work). Animasi ini hanya menggunakan Html dan Css saja sebagai bahannya. Pada postingan lalu kami juga telah membagikan cara membuat animasi css bergerak dengan animation iteration count.

Bagi Anda yang penasaran dan ingin mencobanya, bisa langsung saja kopi paste kode-kodenya dibawah.

Live Demo

Untuk langkah pertama mari kita buat Html nya seperti ini:


<div class='wrapper'>
  <div></div>
</div>
<div class='wrapper'>
  <div></div>
</div>
<div class='wrapper'>
  <div></div>
</div>
<div class='wrapper'>
  <div></div>
</div>
<div class='wrapper'>
  <div></div>
</div>

Jika sudah, lanjut ketahap selanjutnya yaitu buat Css nya, dan kodenya seperti dibawah ini:


  * {
    box-sizing: border-box;
  }

  html,
  body {
    align-items: center;
    background: linear-gradient(45deg, #d91e18, #9a12b3);
    display: flex;
    justify-content: center;
    margin: 0;
    min-height: 100vh;
    padding: 0;
    width: 100vw;
  }

  .wrapper {
    position: absolute;
  }

  .wrapper:nth-of-type(2)>div {
    height: 40px;
    width: 40px;
    opacity: 0.8;
  }

  .wrapper:nth-of-type(3)>div {
    height: 30px;
    width: 30px;
    opacity: 0.6;
  }

  .wrapper:nth-of-type(4)>div {
    height: 20px;
    width: 20px;
    opacity: 0.4;
  }

  .wrapper:nth-of-type(5)>div {
    height: 10px;
    width: 10px;
    opacity: 0.2;
  }

  div>div {
    background: #fff;
    border-radius: 100%;
    height: 50px;
    margin: 40px;
    width: 50px;
  }
.wrapper {
  -webkit-animation: x 1s ease-in-out alternate infinite 0s both;
          animation: x 1s ease-in-out alternate infinite 0s both;
}

.wrapper > div {
  -webkit-animation: y 1s linear infinite 0s both;
          animation: y 1s linear infinite 0s both;
}

.wrapper:nth-of-type(2),
.wrapper:nth-of-type(2) > div {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.wrapper:nth-of-type(3),
.wrapper:nth-of-type(3) > div {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.wrapper:nth-of-type(4),
.wrapper:nth-of-type(4) > div {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.wrapper:nth-of-type(5),
.wrapper:nth-of-type(5) > div {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}


@-webkit-keyframes x {
  0% {
            -webkit-transform: translate(-100px, 0);
                    transform: translate(-100px, 0);
  }
  100% {
            -webkit-transform: translate(100px, 0);
                    transform: translate(100px, 0)
  }
}

@keyframes x {
  0% {
            -webkit-transform: translate(-100px, 0);
                    transform: translate(-100px, 0);
  }
  100% {
            -webkit-transform: translate(100px, 0);
                    transform: translate(100px, 0)
  }
}


@-webkit-keyframes y {
  25% {
    -webkit-transform: translate(0, -50px);
            transform: translate(0, -50px);
  }
  0%, 50%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  75% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }

}


@keyframes y {
  25% {
    -webkit-transform: translate(0, -50px);
            transform: translate(0, -50px);
  }
  0%, 50%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  75% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }

}

Simpan kedua file tersebut dan jika digabungkan hasilnya akan seperti ini:


  * {
    box-sizing: border-box;
  }

  html,
  body {
    align-items: center;
    background: linear-gradient(45deg, #d91e18, #9a12b3);
    display: flex;
    justify-content: center;
    margin: 0;
    min-height: 100vh;
    padding: 0;
    width: 100vw;
  }

  .wrapper {
    position: absolute;
  }

  .wrapper:nth-of-type(2)>div {
    height: 40px;
    width: 40px;
    opacity: 0.8;
  }

  .wrapper:nth-of-type(3)>div {
    height: 30px;
    width: 30px;
    opacity: 0.6;
  }

  .wrapper:nth-of-type(4)>div {
    height: 20px;
    width: 20px;
    opacity: 0.4;
  }

  .wrapper:nth-of-type(5)>div {
    height: 10px;
    width: 10px;
    opacity: 0.2;
  }

  div>div {
    background: #fff;
    border-radius: 100%;
    height: 50px;
    margin: 40px;
    width: 50px;
  }
.wrapper {
  -webkit-animation: x 1s ease-in-out alternate infinite 0s both;
          animation: x 1s ease-in-out alternate infinite 0s both;
}

.wrapper > div {
  -webkit-animation: y 1s linear infinite 0s both;
          animation: y 1s linear infinite 0s both;
}

.wrapper:nth-of-type(2),
.wrapper:nth-of-type(2) > div {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.wrapper:nth-of-type(3),
.wrapper:nth-of-type(3) > div {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.wrapper:nth-of-type(4),
.wrapper:nth-of-type(4) > div {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.wrapper:nth-of-type(5),
.wrapper:nth-of-type(5) > div {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}


@-webkit-keyframes x {
  0% {
            -webkit-transform: translate(-100px, 0);
                    transform: translate(-100px, 0);
  }
  100% {
            -webkit-transform: translate(100px, 0);
                    transform: translate(100px, 0)
  }
}

@keyframes x {
  0% {
            -webkit-transform: translate(-100px, 0);
                    transform: translate(-100px, 0);
  }
  100% {
            -webkit-transform: translate(100px, 0);
                    transform: translate(100px, 0)
  }
}


@-webkit-keyframes y {
  25% {
    -webkit-transform: translate(0, -50px);
            transform: translate(0, -50px);
  }
  0%, 50%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  75% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }

}


@keyframes y {
  25% {
    -webkit-transform: translate(0, -50px);
            transform: translate(0, -50px);
  }
  0%, 50%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  75% {
    -webkit-transform: translate(0, 50px);
            transform: translate(0, 50px);
  }

}
<div class='wrapper'>
  <div></div>
</div>
<div class='wrapper'>
  <div></div>
</div>
<div class='wrapper'>
  <div></div>
</div>
<div class='wrapper'>
  <div></div>
</div>
<div class='wrapper'>
  <div></div>
</div>

Langkah terakhir adalah, kunjungi melalui browser masing-masing dan lihat bagaimana hasilnya.

Blogger
Disqus
Select your comment system

No comments