Membuat Animasi Loading Menggunakan CSS

Animasi Loading adalah suatu animasi yang dibuat untuk mengetahui suatu proses tertentu sudah selesai di proses dan berjalan sukses atau tidak. Dan pada kesempatan kali ini saya akan Membuat Animasi Loading Menggunakan CSS.

Langkah pertama dalam Membuat Animasi Loading Menggunakan CSS yaitu membuat struktur html seperti pada script di bawah ini.

<!DOCTYPE html>

<html>

<head>

  <title>Membuat Animasi Loading Menggunakan CSS</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">

</head>

<body>

  <h1 align="center">Cara Membuat Animasi Load Finish Menggunakan CSS</h1>

  <div class="background">

    <input type="checkbox" id="button"></input>

    <label for="button" class="button">

      Finish<i class="fas fa-check"></i>

  </label>

    <svg class="circle">

      <circle cx="32" cy="32" r="31"/>

    </svg>

  </div>

</body>

</html>

Jika sudah maka dilanjutkan dengan membuat style css seperti berikut ini.

  <style>

    .background {

      position: relative;

      background: linear-gradient(to top, #49b26e 0%, #57d895 100%);

      border-radius: 5px;

      display: flex;

      align-items: center;

      justify-content: center;

      flex-direction: column;

      box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);

      width: 200px;

      height: 200px;

      color: white;

      margin: auto;

    }

    .background input {

      display: none;

    }

    .background .button {

      display: flex;

      justify-content: center;

      align-items: center;

      width: 160px;

      height: 60px;

      border: 2px solid white;

      border-radius: 30px;

      text-align: center;

      font-size: 20px;

      text-transform: uppercase;

      font-weight: bold;

      letter-spacing: 2px;

      transition: all 0.3s ease-in-out;

      cursor: pointer;

    }

    .background .button:hover {

      background-color: #37be77;

    }

    .background .button .fas {

      position: absolute;

      color: #4caf50;

      z-index: 2;

      opacity: 0;

    }

    .background .circle {

      position: absolute;

      width: 65px;

      height: 65px;

      fill: none;

      stroke: white;

      stroke-width: 2px;

      stroke-linecap: round;

      stroke-dasharray: 183 183;

      stroke-dashoffset: 183;

      opacity: 0;

      left: 0;

      bottom: 0;

      right: 0;

      top: 0;

      margin: auto;

      pointer-events: none;

      transform: rotate(-90deg);

    }

    .background input:checked ~ .button {

      animation: button 0.5s ease both, fill 0.5s ease-out 1.5s forwards;

    }

    .background input:checked ~ .button .fas {

      animation: check 0.5s ease-out 1.5s both;

    }

    .background input:checked ~ .circle {

      animation: circle 2s ease-out 0.5s both;

    }

 

    @keyframes button {

      0% {

        width: 260px;

        left: 70px;

        border-color: white;

        color: white;

      }

      50% {

        color: transparent;

      }

      100% {

        width: 60px;

        left: 170px;

        border-color: #45b078;

        background: transparent;

        color: transparent;

      }

    }

    @keyframes circle {

      0% {

        stroke-dashoffset: 183;

      }

      50% {

        stroke-dashoffset: 0;

        stroke-dasharray: 183;

        transform: rotate(-90deg) scale(1);

        opacity: 1;

      }

      90%,

      100% {

        stroke-dasharray: 500 500;

        transform: rotate(-90deg) scale(2);

        opacity: 0;

      }

    }

    @keyframes fill {

      0% {

        background: transparent;

        border-color: white;

      }

      100% {

        background: white;

      }

    }

    @keyframes check {

      0% {

        opacity: 0;

      }

      100% {

        opacity: 1;

      }

    }

  </style>

 

Dan jika teman-teman tampilkan dihalaman browser maka akan tampil seperti pada gambar di bawah.

Demikian artikel tentang cara Membuat Animasi Loading Menggunakan CSS.

 

8 Juli 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat