Pemuat Elemen Tunggal: Titik-titik

Kami sedang melihat loader dalam seri ini. Lebih dari itu, kami memecah beberapa pola pemuat umum dan cara membuatnya kembali dengan tidak lebih dari satu div. Sejauh ini, kami telah memisahkan pemuat berputar klasik. Sekarang, mari kita lihat satu lagi yang mungkin sudah Anda ketahui: titik.

Dot loader ada di mana-mana. Mereka rapi karena biasanya terdiri dari tiga titik yang terlihat seperti teks elipsis (…) yang menari-nari.

Tujuan kami di sini adalah membuat hal yang sama dari elemen div tunggal. Dengan kata lain, tidak ada satu div per titik atau animasi individual untuk setiap titik.

Contoh loader di atas dibuat dengan elemen div tunggal, beberapa deklarasi CSS, dan tanpa elemen semu. Saya menggabungkan dua teknik menggunakan CSS background dan mask. Dan ketika kita selesai, kita akan melihat bagaimana menganimasikan gradien latar belakang membantu menciptakan ilusi setiap titik yang berubah warna saat mereka bergerak naik dan turun secara berurutan.

Animasi latar belakang

Mari kita mulai dengan animasi latar belakang:

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

Saya harap ini terlihat cukup sederhana. Apa yang kita punya adalah 180px-lebar .loader elemen yang menunjukkan dua gradien berbentuk kerucut dengan warna keras berhenti di antara dua warna masing-masing — gradien pertama berwarna merah dan biru di sepanjang bagian atas .loader, dan gradien kedua berwarna hijau dan ungu di sepanjang bagian bawah.

Cara ukuran latar belakang pemuat (200% lebar), kita hanya melihat salah satu dari warna-warna itu di setiap bagian pada satu waktu. Kemudian kita memiliki animasi kecil ini yang mendorong posisi gradien latar belakang ke kiri, kanan, dan kembali lagi selamanya.

Saat berhadapan dengan properti latar belakang — terutama background-position — Saya selalu mengacu pada saya Jawaban Stack Overflow di mana saya memberikan penjelasan terperinci tentang bagaimana semua ini bekerja. Jika Anda merasa tidak nyaman dengan tipu daya latar belakang CSS, saya sangat merekomendasikan membaca jawaban itu untuk membantu apa yang akan terjadi selanjutnya.

Dalam animasi, perhatikan bahwa lapisan pertama adalah Y=0% (ditempatkan di atas) sementara X adalah perubahan dari 0% untuk 100%. Untuk lapisan kedua, kami memiliki hal yang sama untuk X tapi Y=100% (diletakkan paling bawah).

Mengapa menggunakan conic-gradient() alih-alih linear-gradient()?

Pertanyaan bagus! Secara intuitif, kita harus menggunakan gradien linier untuk membuat gradien dua warna seperti ini:

linear-gradient(90deg, red 50%, blue 0)

Tapi kita juga bisa mencapai hal yang sama menggunakan a conic-gradient() — dan dengan lebih sedikit kode. Kami mengurangi kode dan juga mempelajari trik baru dalam prosesnya!

Menggeser warna ke kiri dan ke kanan adalah cara yang bagus untuk membuatnya terlihat seperti kita sedang mengubah warna, tetapi mungkin lebih baik jika kita langsung mengubah warna — dengan begitu, tidak ada kemungkinan titik pemuat mem-flash dua warna secara bersamaan . Untuk melakukan ini, mari kita ubah animationfungsi waktu dari linear untuk steps(1)

Titik-titik pemuat

Jika Anda mengikuti bersama dengan artikel pertama dalam seri ini, saya yakin Anda tahu apa yang terjadi selanjutnya: topeng CSS! Apa yang membuat topeng begitu hebat adalah bahwa mereka membiarkan kita menyortir "potong" bagian dari latar belakang dalam bentuk elemen lain. Jadi, dalam hal ini, kami ingin membuat beberapa titik, menunjukkan gradien latar belakang melalui titik-titik, dan memotong bagian mana pun dari latar belakang yang bukan merupakan bagian dari titik.

Kami akan menggunakan radial-gradient() untuk ini:

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

Ada beberapa kode duplikat di sana, jadi mari kita buat variabel CSS untuk menyederhanakannya:

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

Keren keren. Tapi sekarang kita membutuhkan animasi baru yang membantu memindahkan titik-titik ke atas dan ke bawah di antara gradien animasi.

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

Ya, itu total tiga gradien radial di sana, semuanya dengan konfigurasi yang sama dan ukuran yang sama — animasi akan memperbarui posisi masing-masing. Perhatikan bahwa X koordinat setiap titik adalah tetap. Itu mask-position didefinisikan sedemikian rupa sehingga titik pertama berada di sebelah kiri (0%), yang kedua di tengah (50%), dan yang ketiga di sebelah kanan (100%). Kami hanya memperbarui Y koordinat dari 0% untuk 100% untuk membuat titik-titik menari.

Inilah yang kami dapatkan:

Sekarang, gabungkan ini dengan animasi gradien dan keajaiban mulai terjadi:

Variasi pemuat titik

Variabel CSS yang kita buat di contoh terakhir membuatnya lebih mudah untuk menukar warna baru dan membuat lebih banyak variasi dari loader yang sama. Misalnya, berbagai warna dan ukuran:

Bagaimana dengan gerakan lain untuk titik-titik kita?

Di sini, yang saya lakukan hanyalah memperbarui animasi untuk mempertimbangkan posisi yang berbeda, dan kami mendapatkan pemuat lain dengan struktur kode yang sama!

Teknik animasi yang saya gunakan untuk lapisan topeng juga dapat digunakan dengan lapisan latar belakang untuk membuat banyak pemuat berbeda dengan satu warna. Saya menulis artikel terperinci tentang ini. Anda akan melihat bahwa dari struktur kode yang sama kita dapat membuat variasi yang berbeda hanya dengan mengubah beberapa nilai. Saya membagikan beberapa contoh di akhir artikel.

Mengapa bukan pemuat dengan satu titik?

Yang ini seharusnya cukup mudah untuk grok karena saya menggunakan teknik yang sama tetapi dengan logika yang lebih sederhana:

Berikut adalah contoh lain dari loader di mana saya juga menganimasikan radial-gradient digabungkan dengan Filter CSS dan mix-blend-mode untuk membuat efek gumpalan:

Jika Anda memeriksa kodenya, Anda akan melihat bahwa yang sebenarnya saya lakukan hanyalah menganimasikan background-position, persis seperti yang kami lakukan dengan pemuat sebelumnya, tetapi menambahkan sedikit background-size untuk membuatnya terlihat seperti gumpalan yang semakin besar karena menyerap titik-titik.

Jika Anda ingin memahami keajaiban di balik efek gumpalan itu, Anda dapat merujuk ke slide interaktif ini (Khusus Chrome) oleh Ana Tudor karena dia membahas topik dengan sangat baik!

Berikut adalah ide pemuat titik lainnya, kali ini menggunakan teknik yang berbeda:

Yang ini hanya 10 deklarasi CSS dan sebuah keyframe. Elemen utama dan dua elemen semunya memiliki konfigurasi latar belakang yang sama dengan satu gradien radial. Masing-masing menciptakan satu titik, dengan total tiga. Animasi memindahkan gradien dari atas ke bawah dengan menggunakan penundaan yang berbeda untuk setiap titik..

Oh, dan perhatikan bagaimana demo ini menggunakan CSS Grid. Ini memungkinkan kami untuk memanfaatkan default grid stretch keselarasan sehingga kedua elemen semu menutupi seluruh area induknya. Tidak perlu untuk ukuran! Dorong sedikit dengan translate() dan kita sudah siap.

Lebih banyak contoh!

Hanya untuk mengarahkan intinya ke rumah, saya ingin meninggalkan Anda dengan banyak contoh tambahan yang benar-benar variasi dari apa yang telah kita lihat. Saat Anda melihat demo, Anda akan melihat bahwa pendekatan yang kami bahas di sini sangat fleksibel dan membuka banyak kemungkinan desain.

Selanjutnya…

Oke, jadi kami membahas pemuat titik di artikel ini dan pemintal di artikel terakhir. Dalam artikel berikutnya dari seri empat bagian ini, kita akan mengalihkan perhatian kita ke jenis loader umum lainnya: bar. Kami akan mengambil banyak dari apa yang kami pelajari sejauh ini dan melihat bagaimana kami dapat memperluasnya untuk membuat pemuat elemen tunggal lainnya dengan kode sesedikit mungkin dan sebanyak mungkin fleksibilitas.

---

Pemuat Elemen Tunggal: Titik-titik awalnya diterbitkan pada Trik CSS. Kamu harus dapatkan buletin.

• Coinsmart. Pertukaran Bitcoin dan Crypto Terbaik Eropa.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. AKSES GRATIS.
• CryptoHawk. Radar Altcoin. Uji Coba Gratis.
• Sumber: https://css-tricks.com/single-element-loaders-the-dots/