Membuat Loading Animation dengan HTML dan CSS

Halo teman-teman! Dalam artikel ini, kita akan belajar bagaimana cara membuat Loading Animation hanya menggunakan HTML dan CSS. Jika kamu mencari cara untuk membuat animasi loading yang menarik dan responsif, tutorial ini sangat cocok untukmu.

Sebelumnya, saya juga telah membagikan tutorial tentang cara membuat animasi Rotating Words dengan HTML dan CSS, dan kali ini kita akan fokus pada Loading Animation. Jika kamu menyukai artikel ini, jangan lupa untuk subscribe rebelsec.id agar tidak ketinggalan tutorial terbaru!

Apa Itu CSS Animation?

Animasi CSS memungkinkan elemen berubah secara bertahap dari satu gaya ke gaya lainnya. Dengan CSS Animation, kamu dapat mengubah berbagai properti CSS sebanyak yang kamu inginkan dan sesering yang dibutuhkan.

Untuk menggunakan CSS Animation, langkah-langkahnya adalah:

Menentukan keyframes untuk animasi menggunakan aturan @keyframes.
Menghubungkan animasi ke elemen dengan properti animation.

Apa Itu `@keyframes` dalam CSS?

@keyframes adalah aturan dalam CSS yang digunakan untuk menentukan tahapan animasi dari suatu elemen. Animasi ini akan berubah secara bertahap dari satu gaya ke gaya lainnya pada waktu tertentu.

Untuk membuat animasi berfungsi, kita harus menghubungkan keyframes dengan elemen yang diinginkan menggunakan properti animation.

💻 Source Code: HTML & CSS

Jika kamu menyukai Loading Animation ini, silakan gunakan dalam proyekmu. Salin kode berikut dan buat dua file:
✅ index.html (File HTML)
✅ style.css (File CSS)

📌 Langkah-langkahnya:
1️⃣ Buat file index.html dan tempelkan kode berikut:


<span style="font-family: verdana, geneva, sans-serif;"><!DOCTYPE html>
<html>
  <head>
    <title>Loading Animation | By Rebelsec.id</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="loading-bar">
      <div class="load-section">
        <div class="circle">
          <div class="dot"></div>
        </div>
        <div class="circle">
          <div class="dot"></div>
        </div>
        <div class="circle">
          <div class="dot"></div>
        </div>
        <div class="circle">
          <div class="dot"></div>
        </div>
        <div class="circle">
          <div class="dot"></div>
        </div>
        <div class="circle">
          <div class="dot"></div>
        </div>
        <div class="loading-text">Loading...</div>
      </div>
    </div>
  </body>
</html></span>

2️⃣ Buat file style.css dan tempelkan kode berikut:


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  background: red;
  min-height: 100vh;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.loading-bar {
  width: 100%;
  display: flex;
  position: relative;
  justify-content: center;
}

.load-section {
  top: -35px;
  position: absolute;
  transform: scale(1.5);
}

.circle {
  width: 1px;
  height: 5px;
  position: absolute;
  animation: rotate 3.5s linear infinite;
}

.circle .dot {
  top: 30px;
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  position: relative;
}

.loading-text {
  color: #fff;
  bottom: -85px;
  font-size: 25px;
  font-weight: 400;
  margin-left: -50px;
  position: absolute;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

@keyframes rotate {
  30% {
    transform: rotate(220deg);
  }
  40% {
    transform: rotate(450deg);
    opacity: 1;
  }
  75% {
    transform: rotate(720deg);
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: rotate(0deg);
  }
}
.circle:nth-child(1) {
  animation-delay: 0.15s;
}
.circle:nth-child(2) {
  animation-delay: 0.3s;
}

.circle:nth-child(3) {
  animation-delay: 0.45s;
}

.circle:nth-child(4) {
  animation-delay: 0.6s;
}

.circle:nth-child(5) {
  animation-delay: 0.75s;
}

.circle:nth-child(6) {
  animation-delay: 0.9s;
}

🎯 Penjelasan Kode

🔹 Elemen div.loading-spinner

Membuat elemen berbentuk lingkaran dengan border-radius: 50%.
Menggunakan border-top berwarna biru untuk efek animasi.
Animasi spin akan membuat elemen ini berputar terus-menerus.

🔹 @keyframes spin

Menggunakan transform: rotate(360deg) agar lingkaran berputar searah jarum jam.
animation: spin 1s linear infinite; membuat animasi berjalan tanpa henti.

🔹 h3 (Teks "Loading...")

Diberi jarak dengan margin-top: 15px agar tidak terlalu dekat dengan animasi.
Menggunakan warna teks abu-abu gelap (#555) agar terlihat profesional.

🔹 Kesimpulan

Kita telah berhasil membuat Loading Animation menggunakan HTML dan CSS dengan berbagai efek menarik. Animasi ini dapat digunakan di berbagai proyek seperti website, aplikasi web, atau mobile untuk memberikan pengalaman pengguna yang lebih baik.