Pemuat Elemen Tunggal: Pemintal

Membuat pemuat khusus CSS adalah salah satu tugas favorit saya. Itu selalu memuaskan untuk melihat animasi tak terbatas itu. Dan, tentu saja, ada banyak teknik dan pendekatan untuk membuatnya — tidak perlu lihat lebih jauh dari CodePen untuk melihat berapa banyak. Namun, dalam artikel ini, kita akan melihat cara membuat pemuat elemen tunggal menulis kode sesedikit mungkin.

Saya memiliki membuat koleksi lebih dari 500 pemuat div tunggal dan dalam seri empat bagian ini, saya akan membagikan trik yang saya gunakan untuk membuat banyak trik. Kami akan membahas sejumlah besar contoh, menunjukkan bagaimana penyesuaian kecil dapat menghasilkan variasi yang menyenangkan, dan betapa sedikit kode yang perlu kami tulis untuk mewujudkan semuanya!

Untuk artikel pertama ini, kita akan membuat salah satu pola loader yang lebih umum: spinning bar:

Berikut pendekatannya

Implementasi sepele untuk pemuat ini adalah membuat satu elemen untuk setiap batang yang dibungkus di dalam elemen induk (untuk sembilan elemen total), lalu mainkan dengan opacity dan transform untuk mendapatkan efek berputar.

Implementasi saya, bagaimanapun, hanya membutuhkan satu elemen:

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

…dan 10 deklarasi CSS:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

Mari kita hancurkan itu

Pada pandangan pertama, kodenya mungkin terlihat aneh tetapi Anda akan melihat bahwa itu lebih sederhana daripada yang mungkin Anda pikirkan. Langkah pertama adalah menentukan dimensi elemen. Dalam kasus kami, ini adalah 150px kotak. Kita bisa menempatkan aspect-ratio untuk digunakan sehingga elemen tetap persegi apa pun yang terjadi.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

Saat membuat pemuat CSS, saya selalu mencoba untuk memiliki satu nilai untuk mengontrol ukuran keseluruhan. Dalam hal ini, itu adalah width dan semua perhitungan yang kami bahas akan mengacu pada nilai itu. Ini memungkinkan saya untuk mengubah satu nilai untuk mengontrol loader. Itu selalu penting untuk dapat dengan mudah menyesuaikan ukuran loader kami tanpa perlu menyesuaikan banyak nilai tambahan.

Selanjutnya, kita akan menggunakan gradien untuk membuat bilah. Ini adalah bagian tersulit! Mari kita gunakan satu gradien untuk dibuat dua bar seperti di bawah ini:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

Gradien kami didefinisikan dengan satu warna dan dua warna berhenti. Hasilnya adalah warna solid tanpa memudar atau transisi. Ukurannya sama dengan 34% lebar dan 8% tinggi. Itu juga ditempatkan di tengah (50%). Triknya adalah penggunaan nilai kata kunci space — ini menduplikasi gradien, memberi kita dua batang total.

Dari spesifikasi:

Gambar diulang sesering mungkin sesuai dengan area pemosisian latar belakang tanpa terpotong dan kemudian gambar diberi jarak untuk mengisi area tersebut. Gambar pertama dan terakhir menyentuh tepi area.

Saya menggunakan lebar yang sama dengan 34% yang berarti kita tidak dapat memiliki lebih dari dua batang (3*34% lebih besar dari 100%) tetapi dengan dua batang kita akan memiliki ruang kosong (100% - 2 * 34% = 32%). Ruang itu ditempatkan di tengah antara dua batang. Dengan kata lain, kami menggunakan lebar untuk gradien yang berada di antara 33% dan 50% untuk memastikan kita memiliki setidaknya dua batang dengan sedikit ruang di antaranya. Nilai space adalah apa yang benar menempatkan mereka untuk kita.

Kami melakukan hal yang sama dan membuat gradien serupa kedua untuk mendapatkan dua batang lagi di bagian atas dan bawah, yang memberi kami a background nilai properti dari:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

Kita dapat mengoptimalkannya menggunakan variabel CSS untuk menghindari pengulangan:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

Jadi, sekarang kami memiliki empat batang dan, berkat variabel CSS, kami dapat menulis nilai warna satu kali yang memudahkan untuk memperbarui nanti (seperti yang kami lakukan dengan ukuran pemuat).

Untuk membuat bilah yang tersisa, mari ketuk .loader elemen dan ::before pseudo-element untuk mendapatkan empat batang lagi dengan total delapan batang.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

Perhatikan penggunaan display: grid. Ini memungkinkan kita untuk mengandalkan default grid stretch keselarasan untuk membuat elemen semu menutupi seluruh area induknya; jadi tidak perlu menentukan dimensi di dalamnya — trik lain yang mengurangi kode dan menghindari kita berurusan dengan banyak nilai!

Sekarang mari kita putar elemen semu dengan 45deg untuk memposisikan batang yang tersisa. Arahkan demo berikut untuk melihat triknya:

Mengatur opasitas

Apa yang kami coba lakukan adalah menciptakan kesan bahwa ada satu batang yang meninggalkan jejak batang memudar di belakangnya saat melewati jalur melingkar. Yang kita butuhkan sekarang adalah bermain dengan transparansi bilah kita untuk membuat jejak itu, yang akan kita lakukan dengan CSS mask dikombinasikan dengan conic-gradient sebagai berikut:

mask: conic-gradient(from 22deg,#0003,#000);

Untuk melihat triknya dengan lebih baik, mari terapkan ini ke kotak penuh warna:

Transparansi warna merah secara bertahap meningkat searah jarum jam. Kami menerapkan ini ke loader kami dan kami memiliki bilah dengan opacity berbeda:

Pada kenyataannya, setiap batang tampak memudar karena tertutup oleh gradien dan berada di antara dua warna semi-transparan. Hampir tidak terlihat saat ini berjalan, jadi seperti bisa mengatakan bahwa semua batang memiliki warna yang sama dengan tingkat opacity yang berbeda.

Rotasi

Mari kita terapkan animasi rotasi untuk mendapatkan loader kita. Perhatikan, bahwa kita membutuhkan animasi bertahap dan bukan animasi berkelanjutan, itulah sebabnya saya menggunakan steps(8). 8 tidak lain adalah jumlah batang, sehingga nilainya dapat diubah tergantung pada jumlah batang yang digunakan.

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

Itu dia! Kami memiliki pemuat kami dengan hanya satu elemen dan beberapa baris CSS. Kita dapat dengan mudah mengontrol ukuran dan warnanya dengan menyesuaikan satu nilai.

Karena kami hanya menggunakan ::before pseudo-element, kita dapat menambahkan empat batang lagi dengan menggunakan ::after untuk diakhiri dengan total 12 bar dan kode yang hampir sama:

Kami memperbarui rotasi elemen semu kami untuk dipertimbangkan 30deg dan 60deg alih-alih 45deg saat menggunakan animasi dua belas langkah, bukan delapan. Saya juga mengurangi ketinggian menjadi 5% alih-alih 8% untuk membuat batang sedikit lebih tipis.

Perhatikan juga, bahwa kita memiliki grid-area: 1/1 pada elemen semu. Ini memungkinkan kita untuk menempatkannya di area yang sama satu sama lain, ditumpuk di atas satu sama lain.

Tebak apa? Kami dapat menjangkau pemuat yang sama menggunakan implementasi lain:

Bisakah Anda mengetahui logika di balik kode tersebut? Berikut ini petunjuknya: opacity tidak lagi ditangani dengan CSS mask tetapi di dalam gradien dan juga menggunakan opacity milik.

Mengapa tidak titik saja?

Kami benar-benar dapat melakukan itu:

Jika Anda memeriksa kodenya, Anda akan melihat bahwa kita sekarang bekerja dengan gradien radial alih-alih linier. Jika tidak, konsepnya persis sama di mana topeng menciptakan kesan opacity, tapi kami membuat bentuknya sebagai lingkaran, bukan garis.

Di bawah ini adalah gambar untuk menggambarkan konfigurasi gradien baru:

Jika Anda menggunakan Safari, perhatikan bahwa demo mungkin bermasalah. Itu karena Safari saat ini tidak memiliki dukungan untuk at sintaks dalam gradien radial. Tapi kita bisa mengkonfigurasi ulang gradien sedikit untuk mengatasinya:

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

Lebih banyak contoh pemuat

Berikut adalah ide lain untuk pemuat pemintal yang serupa dengan yang sebelumnya.

Untuk yang satu ini, saya hanya mengandalkan background dan mask untuk membuat bentuk (tidak diperlukan elemen semu). Saya juga mendefinisikan konfigurasi dengan variabel CSS untuk dapat membuat banyak variasi dari kode yang sama — contoh lain dari kekuatan variabel CSS. Saya menulis artikel lain tentang teknik ini jika Anda ingin lebih detail.

Perhatikan bahwa beberapa browser masih mengandalkan a -webkit- awalan untuk mask-composite dengan kumpulan nilainya sendiri, dan tidak akan menampilkan pemintal dalam demo. Berikut adalah cara untuk melakukannya tanpa mast-composite untuk lebih banyak dukungan browser.

Saya punya satu lagi untuk Anda:

Untuk yang satu ini, saya menggunakan background-color untuk mengontrol warna, dan menggunakan mask dan mask-composite untuk membuat bentuk akhir:

Sebelum kita mengakhiri, berikut adalah beberapa pemuat berputar yang saya buat beberapa waktu lalu. Saya mengandalkan teknik yang berbeda tetapi masih menggunakan gradien, topeng, elemen semu, dll. Ini bisa menjadi latihan yang baik untuk mengetahui logika masing-masing dan mempelajari trik baru pada saat yang sama. Ini mengatakan, jika Anda memiliki pertanyaan tentang mereka, bagian komentar ada di bawah.

Membungkus

Lihat, ada begitu banyak yang bisa kita lakukan di CSS hanya dengan satu div, beberapa gradien, elemen semu, variabel. Sepertinya kami membuat sejumlah besar pemuat pemintalan yang berbeda, tetapi semuanya pada dasarnya sama dengan sedikit modifikasi.

Ini hanya permulaan. Dalam seri ini, kita akan melihat lebih banyak ide dan konsep lanjutan untuk membuat pemuat CSS.

---

Pemuat Elemen Tunggal: Pemintal 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-spinner/