Bagaimana untuk membuat cincin pemuat animasi menggunakan HTML dan CSS?

Ikhtisar

Pemuat ialah komponen web yang digunakan oleh hampir semua aplikasi web. Untuk membina gelang pemuat, kita harus mempunyai pengetahuan terdahulu tentang Helaian Gaya Cascading (CSS), kerana CSS melibatkan bahagian penggayaan dan animasi gelang pemuat. Memandangkan komponen pemuat dimuatkan sebelum kandungan asal dimuatkan ke dalam halaman web. Sifat gaya utama yang digunakan untuk membina ciri ini ialah animasi, peralihan dan bingkai utama. Ketiga sifat CSS ini akan menukar gelung pemuatan animasi statik yang mudah menjadi gelung pemuatan animasi.

Algoritma

Langkah 1 - Buat fail HTML dalam folder dan bukanya menggunakan editor teks. Tambahkan boilerplate HTML pada fail HTML.

Langkah 2 − Buat bekas div induk HTML dalam teg badan dokumen HTML dengan nama kelas "memuatkan".

<div class="loading"></div>

Langkah 3 −Buat bekas div kanak-kanak, iaitu gelang pemuat utama dengan nama kelas "Pemuat".

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

Langkah 4−Buat tag p yang mengandungi teks "Memuatkan".

<p>Loading ....</p>

Langkah 5 − Sekarang buat fail style.css dan pautkan fail itu ke dokumen HTML.

<link rel="stylesheet" href="style.css">

Langkah 6 − Sekarang gayakan elemen HTML dan buat pemuat berdering dalam halaman web.

body {
   margin: 0;
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

p {
   font-family: 'Segoe UI';
}

Langkah 7 − Sasarkan kelas pemuat dan buat sempadan menggunakan jejari sempadan untuk membuat rangka cincin seperti struktur.

.loader {
   border: 10px solid #d6d6d6;
   border-radius: 50%;
   border-top: 10px solid #5bdb34;
   width: 50px;
   height: 50px;
}

Langkah 8 − Tambahkan atribut animasi pada elemen pemuat, dengan nama animasi "lring" dan termasuk tempoh animasi dan nombor lelaran.

.loader {
   border: 10px solid #d6d6d6;
   border-radius: 50%;
   border-top: 10px solid #5bdb34;
   width: 50px;
   height: 50px;
   animation: lring 1s linear infinite;
}

Langkah 9 − Sekarang buat sifat kerangka utama dan letakkan animasi di atas dan tetapkan animasi kepada elemen.

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

Langkah 10 − Cincin pemuatan animasi telah berjaya dibuat.

Contoh

Dalam contoh ini, kami mencipta komponen berfungsi gelung pemuatan animasi menggunakan sifat animasi HTML dan CSS yang mudah. Untuk mencapai ini, kami mencipta dua fail, fail pertama ialah index.html yang merupakan reka letak atau bingkai gelang pemuat dan fail lain ialah fail style.css yang merupakan gaya dan cara kerja gelang pemuat.

   
   <link rel="stylesheet" href="style.css">
   


   

      <div class="loader"></div>
      <p>Loading ....</p>
   

Kesimpulan

Ciri di atas tersedia untuk semua aplikasi web atau mudah alih. Memandangkan apa yang dibuat di atas hanyalah komponen, kami boleh membenamkan komponen berfungsi ini ke dalam aplikasi yang berfungsi secara langsung dengan menggunakan API untuk mendapatkan data atau data setempat, jadi apabila data rangkaian belum dimuatkan ke halaman web kami, kami boleh menunjukkan pemuatan animasi pada gelung skrin Setelah data dimuatkan, kami menggantikan gelung pemuatan dengan kandungan tapak web. Kami juga boleh membina beban animasi pelbagai reka bentuk.

Atas ialah kandungan terperinci Bagaimana untuk membuat cincin pemuat animasi menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!