Pemuat Unsur Tunggal: Bar

Artikel ini meneroka mewujudkan animasi pemuatan menggunakan bar, mengikuti pendekatan tunggal elemen dan teknik CSS yang fleksibel yang digunakan dalam artikel sebelumnya yang memberi tumpuan kepada pemintal dan titik. Kami akan menjana pelbagai variasi dengan perubahan kod minimum, memanfaatkan kuasa CSS.

Gambaran Keseluruhan Siri

• Pemuat Unsur Tunggal: Pemutar
• Pemuat Elemen Tunggal: Titik
• Pemuat Unsur Tunggal: Bar - Artikel Semasa
• Pemuat Unsur Tunggal: Pergi 3D

Mari kita menyelam ke 20 contoh pemuat bar. Walaupun ini mungkin kelihatan menakutkan, semua contoh berkongsi struktur kod yang sama, dengan variasi yang dicapai melalui pelarasan nilai mudah. Tumpuannya bukanlah untuk mewujudkan satu pemuat tertentu, tetapi untuk menguasai teknik untuk menghasilkan variasi yang tidak terkira banyaknya dari satu kod asas.

Membina bar

Kami mulakan dengan menentukan dimensi menggunakan width (atau height ) dan aspect-ratio untuk mengekalkan perkadaran:

 .Bars {
  lebar: 45px;
  Aspek-nisbah: 1;
}

Kami mensimulasikan tiga bar menggunakan latar belakang kecerunan linear - kaedah yang serupa dengan pemuat titik di bahagian 2.

 .Bars {
  lebar: 45px;
  Aspek-nisbah: 1;
  --c: no-repeat linear-gradient (#000 0 0); / * Tentukan warna */
  Latar Belakang: 
    var (-c) 0% 50%,
    var (-c) 50% 50%,
    var (-c) 100% 50%;
  Latar Belakang: 20% 100%; / * 20% * (3 bar 2 ruang) = 100% */
}

Ini mewujudkan struktur tiga bar. Artikel ini sangat menggunakan manipulasi latar belakang, jadi merujuk kepada artikel sebelumnya atau jawapan limpahan timbunan yang dipautkan akan memberikan penjelasan yang lebih terperinci jika diperlukan.

Menghidupkan bar

Animasi dicapai dengan mengubah saiz atau kedudukan elemen. Mari menghidupkan saiz menggunakan kerangka utama:

 @keyframes beban {
  0% {latar belakang saiz: 20% 100%, 20% 100%, 20% 100%; }
  33% {latar belakang saiz: 20% 10%, 20% 100%, 20% 100%; }
  50% {latar belakang saiz: 20% 100%, 20% 10%, 20% 100%; }
  66% {Latar Belakang: 20% 100%, 20% 100%, 20% 10%; }
  100% {latar belakang saiz: 20% 100%, 20% 100%, 20% 100%; }
}

Kerangka utama menyesuaikan background-size setiap segmen kecerunan merentasi tempoh animasi.

Sebagai alternatif, menetapkan saiz kepada 20% 50% dan menghidupkan kedudukan menghasilkan hasil yang berbeza:

 .loader { / * ... gaya sebelumnya ... * /
  Animasi: Muatkan 1S Infinite Linear;
}
@keyframes beban {
  / * ... Posisi Animasi Keyframe ... */
}

Dengan memanipulasi saiz dan kedudukan, variasi loader yang banyak adalah mungkin. Kecerunan yang lebih kompleks terus memperluaskan pilihan reka bentuk. Kebanyakan contoh dalam demo menggunakan markup dan gaya yang sama, hanya berbeza dalam kombinasi animasi.

Meningkatkan teknik canggih

Teknik pelekat dari artikel Dots boleh digunakan di sini. Menggantikan background-* sifat dengan mask-* dan menambah kecerunan mencipta pemuat visual yang menarik. Teknik teras tetap konsisten antara titik -titik dan bar: kecerunan menentukan bentuk, animasi mengubah saiz/kedudukan, dan topeng menambah warna.

Membulatkan bar

Pendekatan yang berbeza menggunakan ::before dan ::after unsur-unsur pseudo untuk membuat tiga bar bulat:

 .loader { / * ... gaya menggunakan pembolehubah CSS untuk saiz dan kedudukan ... * /}

Kesan kecerunan berterusan disimulasikan dengan meletakkan kecerunan individu dengan teliti dalam setiap elemen. Animasi ketinggian dengan kelewatan menghasilkan animasi yang berbeza -beza.

Kesimpulan

Artikel ini menunjukkan kepelbagaian mewujudkan animasi pemuatan kompleks dengan kod minimum. Dengan menggabungkan unsur-unsur tunggal, kecerunan, elemen pseudo, dan animasi, pelbagai reka bentuk animasi pemuatan boleh dicapai. Contoh dan teknik yang disediakan menggalakkan eksperimen dan penciptaan pemuat yang unik dan menarik.

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