Cara Membuat Animation Circle Loader Dengan HTML & CSS

Cara Membuat Animation Circle Loader dengan HTML dan CSS - Animasi Circle Loader atau biasa disebut Animasi Loading yang berbentuk Lingkaran dapat kita buat hanya dengan HTML dan CSS. Animasi ini biasa digunakan disaat sedang terjadi sebuah penguatan Halaman, maka Animasi ini akan ditampilkan.

Ada begitu banyak jenis Animasi Loader yang digunakan pada sebuah website, tapi tidak semuanya menggunakan Pure CSS, ada yang menggunakan Animasi Loader dalam bentuk GIF, dsb. Oleh karena itu disini saya ingin membagikan sebuah Animasi Circle Loader yang dibuat menggunakan Pure CSS saja, dan HTMLnya digunakan untuk menampilkan isi dari CSS tersebut.

Oke, langsung saja kita ke tutorial bagaimana Cara Membuat Animation Circle Loader Dengan HTML dan CSS, yuk simak tutorial dibawah ini dengan baik.

Cara Membuat Animation Circle Loader Pure CSS

Cara membuat Animasi Circle Loadernya juga sangat mudah kok, kamu hanya perlu Text Editor saja, baik itu Sublime Text, Visual Studio Code, Atom, dsb.

1. Pertama, buatlah sebuah file html dengan nama circle-animation.html, kemudian isi file tersebut dengan kerangka HTML dibawah ini

<!doctype html>
<html>
<head>
    <!-- Title atau Judul -->
    <title>Cara Membuat Animation Circle Loader Pure CSS</title>
    <!-- CSS Animation -->
    <link rel="stylesheet" href="circle-style.css" />
</head>
<body>
    <div class="main-wrapper">
        <div class="circle-loader"></div>
    </div>
</body>
</html>

2. Lalu, buat file css dengan nama circle-style.css, kemudian isi file tersebut dengan CSS dibawah ini,

html, body {
    display: grid;
    height: 100%;
    place-items: center;
    background: #000;
}
.circle-loader {
    display: block;
  }
.circle-loader:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10rem;
    height: 10rem;
    margin: -4rem;
    border: 2px solid rgba(41 98 255 / 0.1);
    border-left-color: #2962ff;
    border-right-color: #2962ff;
    border-radius: 100%;
    animation: spinner 0.8s infinite linear;
    transform-origin: center;
}
  @-webkit-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(1turn);
      transform: rotate(1turn);
    }
  }
  @keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(1turn);
      transform: rotate(1turn);
    }
  }

3. Terakhir, save kedua File tersebut, dan jalankan file circle-animation.html tersebut, dan lihat hasilnya.

DEMO

Animation Circle Loader diatas menggunakan Pure CSS, jadi tidak akan mempengaruhi Speed atau Performa website kalian. Dan kalian juga dapat mengembangkan Circle Animation diatas agar menjadi lebih menarik lagi.

Mungkin itu saja yang dapat saya bagikan mengenai tutorial Bagaimana Cara Membuat Anmation Circle Loader Dengan HTML dan CSS. Jika kalian ada kendala atau kesulitan saat mengikuti tutorial diatas, kalian dapat berkomentar dibawah agar saya dapat membantu kalian mengatasi masalah tersebut.

Tri Rahman

Cara Membuat Animation Circle Loader Dengan HTML & CSS

Cara Membuat Animation Circle Loader Pure CSS

Post a Comment