Terdapat tiga cara untuk membuat pemutar pemuatan CSS: 1. Gunakan pemutar asas sempadan untuk mencapai animasi mudah melalui HTML dan CSS; 2. Gunakan pemutar tersuai pelbagai mata untuk mencapai kesan lompat melalui masa kelewatan yang berlainan; 3. Tambahkan pemutar dalam butang dan beralih kelas melalui JavaScript untuk memaparkan status pemuatan. Setiap pendekatan menekankan pentingnya butiran reka bentuk seperti warna, saiz, kebolehcapaian dan pengoptimuman prestasi untuk meningkatkan pengalaman pengguna.

Mewujudkan pemuatan pemuatan dengan CSS adalah cara yang mudah untuk meningkatkan pengalaman pengguna semasa beban kandungan. Anda tidak memerlukan JavaScript untuk animasi mudah - hanya HTML dan CSS. Berikut adalah kaedah praktikal untuk membina pemintal asas dan disesuaikan.

Pemutar Asas Menggunakan Sempadan

Salah satu cara paling mudah untuk membuat pemutar adalah dengan menggunakan elemen bersempadan dan berputar dengan animasi CSS.

Html:

 <div class = "spinner"> </div>

CSS:

 .spinner {
  lebar: 40px;
  Ketinggian: 40px;
  Sempadan: 4px pepejal #ccc;
  Border-top-color: #333;
  Radius sempadan: 50%;
  Animasi: Spin 1S linear tak terhingga;
}

@keyframes berputar {
  kepada {transform: berputar (360deg); }
}

• border mencipta bentuk cincin.
• border-top-color memberikan kesan "pemuatan" dengan warna yang berbeza.
• Kerangka utama spin berputar unsur tak terhingga.

Kaedah ini berfungsi dengan baik untuk pemuat kecil dan halus.

Pemutar tersuai dengan pelbagai titik

Sekiranya anda menginginkan sesuatu yang lebih visual daripada bulatan berputar, pertimbangkan untuk menghidupkan beberapa titik yang muncul satu demi satu.

Html:

 <div class = "dot-spinner">
  <div class = "dot"> </div>
  <div class = "dot"> </div>
  <div class = "dot"> </div>
</div>

CSS:

 .dot-spinner {
  Paparan: Flex;
  GAP: 5px;
}

.dot {
  lebar: 8px;
  Ketinggian: 8px;
  latar belakang warna: #333;
  Radius sempadan: 50%;
  Animasi: Bounce 1.2S Infinite Ease-In-Out;
}

.dot: nth-child (1) {animation-delay: -0.32s; }
.dot: nth-child (2) {animation-delay: -0.16s; }

@KeyFrames Bounce {
  0%, 80%, 100%{transform: skala (0); }
  40% {transform: skala (1); }
}

• Setiap titik titik masuk dan keluar pada masa yang sedikit berbeza.
• Animasi yang terhuyung -huyung ini memberikan kesan berdenyut atau melantun.
• Anda boleh menukar bilangan titik atau menyesuaikan masa untuk gaya yang berbeza.

Pemintal jenis ini hebat untuk UI moden di mana gerakan halus menambah keperibadian.

Menambah animasi ke butang

Kadang -kadang anda ingin menunjukkan pemutar di dalam butang apabila tindakan sedang diproses.

Html:

 <Button class = "Loading-BTN">
  <span class = "btn-text"> hantar </span>
  <span class = "spinner"> </span>
</butang>

CSS (separa):

 .loading-btn .spinner {
  Paparan: Tiada;
  lebar: 16px;
  Ketinggian: 16px;
  Sempadan: 2px pepejal #fff;
  Border-top-color: telus;
  Radius sempadan: 50%;
  Animasi: Spin 0.8S linear tak terhingga;
  margin-kiri: 8px;
}

.loading-btn.loading .spinner {
  paparan: blok sebaris;
}

.loading-btn.loading .btn-text {
  Kelegapan: 0;
}

• Apabila butang mempunyai kelas loading , pemutar muncul dan teks memudar.
• Anda akan togol kelas menggunakan JavaScript apabila mencetuskan tindakan async.

Pendekatan ini menjadikan antara muka anda responsif dan memberi maklum balas semasa tindakan seperti penyerahan borang.

Petua untuk penyesuaian

Berikut adalah beberapa petua cepat untuk menjadikan pemintal anda berfungsi lebih baik:

• Gunakan warna semantik : Padankan warna spinner ke tema atau jenama anda.
• Pastikan ia kecil : Spinners tidak boleh menguasai skrin kecuali perlu.
• Pertimbangkan kebolehcapaian : Tambah atribut aria jika diperlukan ( aria-busy , role="status" ).
• Mengoptimumkan prestasi : Elakkan animasi yang terlalu rumit yang boleh melambatkan rendering.

Anda boleh mencampurkan teknik ini atau lapisan mereka bergantung kepada keperluan projek anda.

Itulah pada dasarnya bagaimana anda membuat dan menyesuaikan spinners dengan hanya CSS. Ia tidak rumit, tetapi mendapatkan butiran yang betul membuat perbezaan bagaimana lancar dan profesional antara muka anda.

Atas ialah kandungan terperinci Tutorial CSS untuk membuat pemuatan dan animasi pemuatan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!