CSS - Pemuat: Panduan Pemula untuk Mencipta Animasi Pemuat Dinamik

Hai sana, bakal pengembang web! Hari ini, kita akan melihat dunia yang menarik dari CSS pemuat. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengantar 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 menciptakan animasi pemuat yang menarik yang akan 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 melompat saat menunggu konten dimuat? Itu adalah pemuat! Animasi 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 mempersiapkan hal-hal untuk Anda!"

Membuat Pemuat Pertama Anda

Sekarang, mari kita lipatkan lengan dan membuat pemuat pertama kita. Kita akan mulai dengan sesuatu yang sederhana dan perlahan meningkatkan kesulitannya.

CSS Loaders - Contoh Dasar

Ini adalah contoh pemuat dasar yang menciptakan 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) pada semua sisi, kecuali bagian atas, yang biru (#3498db).
4. Properti animation mengatur efek putar kita:

• 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 menciptakan pemuat pertama Anda. Apakah itu menarik?

CSS Loaders - Dengan Properti border-right

Sekarang, mari kita coba pendekatan yang sedikit berbeda. Kita akan menciptakan pemuat 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 kita menambahkan border-right: 16px solid #3498db;. Ini menciptakan pemuat yang tampak seperti mengisi saat berputar. Itu seperti melihat jarum jam bergerak, bukan?

CSS Loaders - Dengan :before dan :after

Sekarang, mari kita naik tingkat dan menciptakan pemuat yang lebih kompleks menggunakan pseudo-elemen :before dan :after. Ini akan memberikan kita efek "lingkaran ganda" yang menarik:

<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); }
}

Pemuat ini menciptakan 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 lingkaran ganda yang mempesona. Bagus kan?

CSS Loaders - Dengan linear-gradient

Untuk trik terakhir kita, mari kita menciptakan pemuat menggunakan linear-gradient. Ini akan memberikan kita transisi warna yang mulus dan kontinu:

<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); }
}

Pemuat ini menggunakan trik yang cerdik:

1. Kita menciptakan lingkaran dengan gradient yang separuh biru dan separuh abu-abu.
2. Kita menambahkan lingkaran putih di atas menggunakan pseudo-elemen :before.
3. Saat lingkaran luar berputar, ia menciptakan ilusi animasi muatan yang halus.

Ringkasan Metode Pemuat

Berikut adalah tabel rujukan cepat 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 lingkaran ganda	:before, :after, animation-delay
Linear-gradient	Transisi warna halus	linear-gradient, :before

Dan itu saja! Anda telah belajar empat metode berbeda untuk menciptakan CSS pemuat. Ingat, ini hanya titik awal - jangan khawatir untuk mencoba warna, ukuran, dan animasi lainnya untuk menciptakan pemuat Anda sendiri.

Pada akhirnya, saya ingin berkongsi cerita singkat. Ketika saya pertama kali mengajar CSS, saya memiliki seorang murid yang frustasi dengan pemuat. Dia mengatakan, "Mengapa usaha? Pengguna membenci menunggu saja!" Tetapi kemudian dia menciptakan pemuat 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 pemuat - mereka mengubah menunggu menjadi menunggu dengan gembira.

Jadi, maju dan ciptakan! Coba teknik ini, campur dan gabungkan mereka, dan yang paling penting, bersenang-senang. Ingat, dalam dunia pengembangan web, kreativitas adalah teman terbaik Anda. Selamat coding, dan sampaijumpa lagi, jaga tetap memutar pemuat Anda!

Credits: Image by storyset