Contoh Loader atau Spinner

Ini adalah animasi pemuatan ringan yang dilaksanakan dalam CSS tulen. 1. Buat bekas Div menggunakan HTML; 2. Tetapkan sempadan bulat melalui CSS dan warna bahagian atas sahaja; 3. Gunakan @KeyFrames animasi untuk terus memutar elemen; 4. Sesuaikan saiz, kelajuan dan warna; 5. Paparan pusat melalui susun atur flex; 6. Paparan kawalan secara dinamik dan bersembunyi dalam kombinasi dengan JavaScript, sesuai untuk penyerahan borang, pemuatan data dan senario lain, lengkap dan tidak ada kebergantungan luaran yang diperlukan.

Berikut adalah contoh CSS Loader (Spinner) yang mudah dan praktikal yang boleh anda gunakan dalam projek web anda. Ia ringan, CSS tulen, dan mudah disesuaikan.

? Pemutar CSS sederhana (loader)

Pemutar ini hebat untuk menunjukkan keadaan pemuatan manakala beban kandungan (contohnya, panggilan API, peralihan halaman).

✅ html

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

✅ CSS

 .loader {
  lebar: 40px;
  Ketinggian: 40px;
  Sempadan: 4PX Solid #F3F3F3;
  Border-Top: 4PX Solid #3498dB;
  Radius sempadan: 50%;
  Animasi: Spin 1S linear tak terhingga;
  Margin: 50px Auto; / * Memusatkannya */
}

@keyframes berputar {
  0% {transform: berputar (0deg); }
  100% {transform: berputar (360deg); }
}

? Bagaimana ia berfungsi

• Pemutar menggunakan sempadan bulat dengan hanya berwarna atas - ini mewujudkan kesan "berputar".
• animation: spin 1s linear infinite berputar elemen secara berterusan.
• Anda boleh menukar:
  • Saiz: Laraskan width / height
  • Kelajuan: Tukar 1s ke lebih cepat ( 0.5s ) atau lebih perlahan
  • Warna: Ubah suai nilai border dan border-top

? ️ Pilihan: Memusatkan loader pada skrin

Untuk memusatkannya secara menegak dan mendatar:

 badan {
  Paparan: Flex;
  Justify-Content: Center;
  Align-item: pusat;
  Min-ketinggian: 100VH;
  Margin: 0;
}

.loader {
  lebar: 40px;
  Ketinggian: 40px;
  Sempadan: 4PX Solid #F3F3F3;
  Border-Top: 4PX Solid #3498dB;
  Radius sempadan: 50%;
  Animasi: Spin 1S linear tak terhingga;
}

? Gunakan kes

• Tunjukkan semasa penyerahan borang
• Semasa mengambil data dari API
• Pada halaman navigasi (aplikasi satu halaman)
• Butang dalam (mis., "Memuatkan ...")

Anda boleh membungkusnya dalam bekas dan menyembunyikannya apabila tidak diperlukan:

 .loader-container {
  Paparan: Tiada; / * Tunjukkan secara dinamik dengan js */
}

.loader-container.active {
  paparan: blok;
}

Itu sahaja - pemutar yang bersih dan moden tanpa JavaScript atau perpustakaan luaran yang diperlukan. Pada dasarnya hanya beberapa baris CSS.

Atas ialah kandungan terperinci Contoh Loader atau Spinner. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!