Cara Membuat Pemuat Bergaya untuk Tapak Web Anda

pengenalan

Pemuat (atau pemutar pemuat) meningkatkan pengalaman pengguna dengan memberikan maklum balas visual semasa masa pemuatan. Dalam tutorial ini, kami akan mencipta pemuat yang anggun dan moden menggunakan HTML dan CSS. Mari selami!

Apakah Pemuat?

Pemuat ialah elemen animasi yang menunjukkan kandungan sedang diproses. Ia memberi jaminan kepada pengguna bahawa aplikasi berfungsi, mengurangkan kemungkinan kekecewaan semasa masa pemuatan.

Mengapa Menggunakan Pemuat?

• Meningkatkan Pengalaman Pengguna: Ia memastikan pengguna dimaklumkan semasa menunggu.
• Meningkatkan Estetika: Pemuat yang direka dengan baik boleh menjadikan tapak web anda kelihatan lebih profesional.
• Menghalang Pengabaian Pengguna: Dengan memberikan maklum balas visual, pengguna kurang berkemungkinan untuk keluar sementara menunggu.

Langkah 1: Menyediakan Struktur HTML
Kami akan bermula dengan struktur HTML asas untuk pemuat kami. Kod berikut mencipta bekas untuk pemuat dengan dua belas bar.

Langkah 2: Menggayakan dengan CSS
Seterusnya, kami akan menambah CSS untuk menggayakan pemuat. Berikut ialah kod untuk membuat pemuat bulat dengan bar animasi.

`.pemuat {
jawatan: relatif;
lebar: 54px;
ketinggian: 54px;
jejari sempadan: 10px;
}

.div pemuat {
lebar: 8%;
ketinggian: 24%;
latar belakang: rgb(128, 128, 128);
jawatan: mutlak;
kiri: 50%;
atas: 30%;
kelegapan: 0;
jejari sempadan: 50px;
bayang kotak: 0 0 3px rgba(0,0,0,0.2);
animasi: fade458 1s linear tak terhingga;
}

@keyframes fade458 {
daripada {
kelegapan: 1;
}

kepada {
kelegapan: 0.25;
}
}`

Langkah 3: Menambah Animasi
Kami akan menggunakan kelewatan putaran dan animasi pada setiap bar untuk mencipta kesan pemuatan dinamik.

`.pemuat .bar1 {
ubah: putar(0deg) terjemah(0, -130%);
kelewatan animasi: 0s;
}

.pemuat .bar2 {
ubah: putar(30deg) terjemah(0, -130%);
kelewatan animasi: -1.1s;
}

.pemuat .bar3 {
ubah: putar(60deg) terjemah(0, -130%);
kelewatan animasi: -1s;
}

.pemuat .bar4 {
ubah: putar(90deg) terjemah(0, -130%);
kelewatan animasi: -0.9s;
}

.pemuat .bar5 {
ubah: putar(120deg) terjemah(0, -130%);
kelewatan animasi: -0.8s;
}

.pemuat .bar6 {
ubah: putar(150deg) terjemah(0, -130%);
kelewatan animasi: -0.7s;
}

.pemuat .bar7 {
ubah: putar(180deg) terjemah(0, -130%);
kelewatan animasi: -0.6s;
}

.pemuat .bar8 {
ubah: putar(210deg) terjemah(0, -130%);
kelewatan animasi: -0.5s;
}

.pemuat .bar9 {
ubah: putar(240deg) terjemah(0, -130%);
kelewatan animasi: -0.4s;
}

.pemuat .bar10 {
ubah: putar(270deg) terjemah(0, -130%);
kelewatan animasi: -0.3s;
}

.pemuat .bar11 {
ubah: putar(300deg) terjemah(0, -130%);
kelewatan animasi: -0.2s;
}

.pemuat .bar12 {
ubah: putar(330deg) terjemah(0, -130%);
kelewatan animasi: -0.1s;
}`

Langkah 4: Mengintegrasikan Pemuat ke dalam Laman Web Anda
Untuk menggunakan pemuat dalam projek web anda, pastikan anda memasukkan HTML dan CSS dalam fail anda. Letakkan penanda HTML pemuat di lokasi yang anda inginkan dan pemuat akan muncul semasa proses pemuatan.

Kesimpulan

Mencipta pemuat boleh meningkatkan pengalaman pengguna tapak web anda dengan ketara. Dengan HTML dan CSS yang mudah, anda boleh membina pemuat yang menarik dan berfungsi secara visual. Eksperimen dengan warna dan saiz agar sesuai dengan reka bentuk tapak web anda!

Atas ialah kandungan terperinci Cara Membuat Pemuat Bergaya untuk Tapak Web Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!