Pemuat Unsur Tunggal: Pemutar

Kerajinan pemuat CSS sahaja adalah cabaran yang menggembirakan. Animasi Infinite yang memukau sentiasa memuaskan untuk dicipta. Codepen mempamerkan pelbagai teknik yang luas, tetapi artikel ini memberi tumpuan kepada pencapaian pemuat unsur tunggal dengan kod minimum.

Saya telah membangunkan lebih daripada 500 pemuat div tunggal, dan siri empat bahagian ini berkongsi teknik yang digunakan. Kami akan meneroka pelbagai contoh, menunjukkan bagaimana pelarasan halus menghasilkan hasil yang pelbagai, dan betapa ringkasnya kod tersebut.

Siri pemuat elemen tunggal:

1. Pemuat Unsur Tunggal: Pemutar - Anda Di Sini
2. Pemuat Elemen Tunggal: Titik
3. Pemuat Unsur Tunggal: Bar
4. Pemuat Unsur Tunggal: Pergi 3D

Artikel pertama ini mewujudkan corak pemuat biasa: bar berputar.

Pendekatan

Pendekatan mudah menggunakan pelbagai elemen (sembilan, dalam kes ini), masing -masing mewakili bar, dalam ibu bapa. Kelegapan dan transformasi membuat kesan berputar.

Kaedah saya, bagaimanapun, hanya menggunakan satu elemen:

<div></div>

... dan 10 deklarasi CSS:

 .loader {
  lebar: 150px; / * mengawal saiz */
  Aspek-nisbah: 1;
  paparan: grid;
  Mask: Conic-Gradient (dari 22Deg, #0003, #000);
  Animasi: Beban 1S Langkah (8) Infinite;
}
.loader,
.loader: sebelum {
  --_ G: Linear-Gradient (#17177C 0 0) 50%; / * mengemas kini warna di sini */
  Latar Belakang: 
    var (--_ g)/34% 8% ruang tidak berulang,
    var (--_ g)/8% 34% ruang tidak berulang;
}
.loader: sebelum {
  Kandungan: "";
  Transform: berputar (45deg);
}
@keyframes beban {
  kepada {transform: berputar (1turn); }
}

Kerosakan kod

Kod mungkin kelihatan luar biasa pada mulanya, tetapi ia lebih mudah daripada yang muncul. Pertama, kita menentukan dimensi elemen - persegi 150px. aspect-ratio memastikan ia tetap persegi tanpa mengira saiz semula.

 .loader {
  lebar: 150px; / * mengawal saiz */
  Aspek-nisbah: 1; / * mengekalkan bentuk persegi */
}

Bagi pemuat CSS, nilai kawalan saiz tunggal adalah ideal. Di sini, ia adalah lebar; Semua pengiraan adalah relatif kepadanya. Ini membolehkan pelarasan saiz mudah.

Kecerunan membuat bar. Ini adalah bahagian yang paling rumit. Kecerunan tunggal menghasilkan dua bar:

 Latar Belakang: Linear-Gradient (#17177C 0 0) 50%/34% 8% ruang tidak berulang;

Kecerunan menggunakan satu warna dan dua warna berhenti, menghasilkan warna pepejal. Saiznya adalah 34% lebar dan 8% tinggi, berpusat (50%). Kata kunci space menggandakan kecerunan, mewujudkan dua bar.

Dari spesifikasi:

Imej diulangi sekerap yang sesuai di dalam kawasan kedudukan latar belakang tanpa dipotong dan kemudian imej -imej itu jauh untuk mengisi kawasan tersebut. Imej pertama dan terakhir menyentuh tepi kawasan.

Lebar 34% hanya membolehkan dua bar (3 34%> 100%), meninggalkan jurang (100% - 2 34% = 32%). Posisi space ini jurang di tengah -tengah. Lebar antara 33% dan 50% memastikan sekurang -kurangnya dua bar dengan jarak.

Kami membuat dua lagi bar menggunakan kecerunan kedua, menghasilkan:

 Latar Belakang: 
 Linear-Gradient (#17177c 0 0) 50%/34% 8% ruang tidak berulang,
 Linear-Gradient (#17177C 0 0) 50%/8% 34% ruang tidak berulang;

Pembolehubah CSS mengoptimumkan ini:

 --_ G: Linear-Gradient (#17177C 0 0) 50%; / * mengemas kini warna di sini */
Latar Belakang: 
 var (--_ g)/34% 8% ruang tidak berulang,
 var (--_ g)/8% 34% ruang tidak berulang;

Ini menghasilkan empat bar. Pembolehubah CSS memudahkan kemas kini warna.

Unsur .loader dan ITS ::before pseudo-element membuat empat lagi bar, berjumlah lapan.

 .loader {
  lebar: 150px; / * mengawal saiz */
  Aspek-nisbah: 1;
  paparan: grid;
}
.loader,
.loader :: sebelum {
  --_ G: Linear-Gradient (#17177C 0 0) 50%; / * mengemas kini warna di sini */
  Latar Belakang: 
    var (--_ g)/34% 8% ruang tidak berulang,
    var (--_ g)/8% 34% ruang tidak berulang;
}
.loader :: sebelum {
  Kandungan: "";
  Transform: berputar (45deg);
}

display: grid memastikan pseudo-elemen meliputi kawasan induk, menghapuskan keperluan untuk dimensi eksplisit.

Putar pseudo-element oleh 45deg meletakkan bar yang tinggal.

Kawalan Opacity

Kesan satu bar yang meninggalkan jejak pudar dicapai dengan menggunakan mask CSS dengan conic-gradient :

 Mask: Conic-Gradient (dari 22Deg,#0003,#000);

Kecerunan ini secara beransur -ansur meningkatkan ketelusan mengikut arah jam. Digunakan untuk loader, ia mewujudkan ilusi bar pudar. Setiap bar kelihatan pudar kerana pelekat, mewujudkan kesan kelegapan yang berbeza -beza.

Animasi putaran

Animasi melangkah, menggunakan steps(8) (di mana 8 adalah bilangan bar), mencipta putaran:

 .loader {
  Animasi: Beban 3S Langkah (8) Infinite;
}

@keyframes beban {
  ke {transform: berputar (1turn)}
}

Ini melengkapkan satu-elemen, minimal-CSS loader. Saiz dan warna mudah dikawal. Menambah A ::after Pseudo-Element boleh berkembang ke dua belas bar dengan pelarasan kod kecil. Pelaksanaan alternatif juga mungkin, menggunakan teknik kecerunan dan kelegapan yang berbeza.

Bentuk Alternatif: Titik

Mewujudkan loader berasaskan dot adalah sama, menggunakan kecerunan radial dan bukannya linear. Konsep teras pelekat untuk kelegapan tetap sama, tetapi bentuknya adalah bulatan. Keserasian safari mungkin memerlukan pelarasan kecerunan.

Contoh selanjutnya

Beberapa pemuat pemutar tambahan ditunjukkan, menggunakan pelbagai teknik (kecerunan, topeng, elemen pseudo). Ini berfungsi sebagai latihan dalam memahami pendekatan yang berbeza.

Kesimpulan

Dengan div tunggal, kecerunan, elemen pseudo, dan pembolehubah, pelbagai pemuat berputar boleh dibuat. Contoh -contohnya adalah sama, dengan pengubahsuaian kecil. Ini hanya permulaan; Siri ini akan meneroka teknik loader CSS yang lebih maju.

Siri pemuat elemen tunggal:

1. Pemuat Unsur Tunggal: Pemutar - Anda Di Sini
2. Pemuat Elemen Tunggal: Titik
3. Pemuat Unsur Tunggal: Bar
4. Pemuat Unsur Tunggal: Pergi 3D

Atas ialah kandungan terperinci Pemuat Unsur Tunggal: Pemutar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!