CSS - Loaders: Panduan untuk Pemula dalam Membuat Animiasi Loading Dinamis

Hai teman-teman masa depan pengembang web! Hari ini, kita akan melihat dunia yang menarik dari CSS loaders. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya – kita akan mulai dari dasar dan meningkatkan tingkat kesulitannya. Pada akhir panduan ini, Anda akan dapat membuat animasi loading yang menarik dan membuat situs web Anda terlihat profesional dan menarik. Jadi, mari kita mulai!

Apa Itu CSS Loaders?

Sebelum kita masuk ke kode, mari kita pahami apa itu CSS loaders dan mengapa mereka penting. Apakah Anda pernah mengunjungi situs web dan melihat lingkaran yang berputar atau titik yang bergoyang saat menunggu konten dimuat? Itu adalah loader! Animi ini memberikan umpan balik visual kepada pengguna, membuat mereka tahu bahwa ada sesuatu yang terjadi di belakang layar. Itu seperti mengatakan ke pengunjung Anda, "Tunggu sebentar, kami sedang menyiapkan hal-hal untuk Anda!"

Membuat Loader Pertama Anda

Sekarang, mari kita kerahkan lengan dan membuat loader pertama kita. Kita akan mulai dengan sesuatu yang sederhana dan secara bertahap meningkatkan kompleksitasnya.

CSS Loaders - Contoh Dasar

Berikut adalah contoh loader dasar yang membuat lingkaran berputar:

<div class="loader"></div>

.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

mari kitauraikan ini:

1. Kita membuat elemen <div> dengan kelas "loader".
2. Dalam CSS kita, kita gayakan div ini menjadi lingkaran menggunakan border-radius: 50%.
3. Kita memberikan border abu-abu tua (#f3f3f3) di semua sisi kecuali bagian atas, yang berwarna biru (#3498db).
4. Properti animation menentukan efek putarannya:

• spin adalah nama animasi kita.
• 2s berarti animasi memakan waktu 2 detik untuk selesai.
• linear berarti kecepatan animasi adalah konstan.
• infinite berarti itu akan terus berulang.

5. Aturan @keyframes menentukan apa yang terjadi selama animasi. Kita memutar dari 0 ke 360 derajat.

Dan voila! Anda telah membuat loader pertama Anda. Isn't that exciting?

CSS Loaders - Dengan Properti border-right

Sekarang, mari kita coba pendekatan yang sedikit berbeda. Kita akan membuat loader yang terlihat seperti "mengisi" searah jarum jam:

<div class="loader"></div>

.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
border-right: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

Perbedaan utama di sini adalah bahwa kita menambahkan border-right: 16px solid #3498db;. Ini membuat loader yang tampak seperti mengisi saat berputar. Itu seperti menonton jarum jam bergerak, bukan?

CSS Loaders - Dengan :before dan :after

Sekarang, mari kita tingkatkan dan membuat loader yang lebih kompleks menggunakan pseudo-elemen :before dan :after. Ini akan memberikan kita efek "double ring":

<div class="loader"></div>

.loader {
width: 120px;
height: 120px;
position: relative;
}

.loader:before, .loader:after {
content: "";
position: absolute;
border: 8px solid #f3f3f3;
border-radius: 50%;
animation: spin 2s linear infinite;
}

.loader:before {
top: 0;
left: 0;
right: 0;
bottom: 0;
border-top-color: #3498db;
}

.loader:after {
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-top-color: #e74c3c;
animation-delay: 0.5s;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

Loader ini membuat dua lingkaran berputar:

1. Lingkaran luar (:before) berputar dengan border atas biru.
2. Lingkaran dalam (:after) sedikit lebih kecil, memiliki border atas merah, dan mulai berputar setengah detik kemudian.

Hasilnya adalah efek double ring yang mempesona. Sangat keren, kan?

CSS Loaders - Dengan linear-gradient

Untuk trik terakhir, mari kita buat loader menggunakan linear-gradient. Ini akan memberikan kita transisi warna yang mulus dan kontinyu:

<div class="loader"></div>

.loader {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(to right, #3498db 50%, #f3f3f3 50%);
animation: spin 1s linear infinite;
}

.loader:before {
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
margin: 10px;
position: relative;
z-index: 1;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

Loader ini menggunakan trik yang cerdik:

1. Kita membuat lingkaran dengan gradient yang setengahnya biru dan setengahnya abu-abu.
2. Kita kemudian menambahkan lingkaran putih di atas menggunakan pseudo-elemen :before.
3. Saat lingkaran luar berputar, ia menciptakan ilusi animasi loading yang mulus.

Ringkasan Metode Loader

Berikut adalah tabel referensi singkat dari metode yang kita pelajari:

Metode	Deskripsi	Properti Kunci
Contoh Dasar	Lingkaran berputar sederhana	border, border-radius, animation
Border-right	Efek mengisi searah jarum jam	border, border-right
:before dan :after	Efek double ring	:before, :after, animation-delay
Linear-gradient	Transisi warna mulus	linear-gradient, :before

Dan begitu saja! Anda telah belajar empat cara berbeda untuk membuat CSS loaders. Ingat, ini hanya titik awal – jangan khawatir untuk mencoba warna, ukuran, dan animasi lainnya untuk membuat loader Anda sendiri.

Pada akhirnya, saya ingin berbagi cerita singkat. Ketika saya pertama kali mengajar CSS, saya memiliki seorang murid yang frustasi dengan loaders. Dia mengatakan, " Mengapa usaha? Pengguna tidak suka menunggu anyway!" Tetapi kemudian dia membuat loader pertamanya, dan mata nya bersinar. Dia menyadari bahwa bahkan waktu tunggu yang kecil dapat diubah menjadi pengalaman yang menyenangkan dengan animasi yang tepat. Itu kekuatan CSS loaders – mereka mengubah menunggu menjadi menunggu dengan gembira.

Jadi, maju dan buat! Coba teknik ini, campur dan gabungkan mereka, dan terutama, bersenang-senang. Ingat, dalam dunia pengembangan web, kreativitas adalah teman terbaik Anda. Selamat mengoding, dan sampaijumpa lagi, jaga menjaga loader Anda berputar!

Credits: Image by storyset