Bagaimana untuk Mencipta Bar Kemajuan Dinamik untuk Pemuatan Halaman Anda?

Cara Mengintegrasikan Bar Kemajuan ke dalam Proses Pemuatan Halaman Anda

Semasa memuatkan halaman, bar kemajuan boleh memberikan maklum balas yang berharga kepada pengguna, menunjukkan kemajuan pengambilan data dan pemaparan halaman. Artikel ini akan membimbing anda melalui proses melaksanakan bar kemajuan yang sedang berjalan semasa halaman anda dimuatkan.

Struktur Kod

Untuk melaksanakan bar kemajuan, anda memerlukan elemen kontena untuk memaparkan kemajuan dan JavaScript untuk mengemas kini lebar atau panjangnya berdasarkan kemajuan pemuatan. Struktur kod sepatutnya kelihatan seperti ini:

<code class="html"><div id="progress-container">
  <div id="progress-bar"></div>
</div></code>

Pengendalian Acara JavaScript

Untuk menangkap kemajuan pemuatan, anda boleh menggunakan acara kemajuan (disokong oleh kebanyakan penyemak imbas moden ). Berikut ialah contoh cara anda boleh menggunakannya:

<code class="javascript">window.addEventListener("progress", (e) => {
  if (e.lengthComputable) {
    const percentage = (e.loaded / e.total) * 100;
    const progressBar = document.getElementById("progress-bar");
    progressBar.style.width = `${percentage}%`;
  }
});</code>

Menggayakan Bar Kemajuan

Untuk menggayakan bar kemajuan, anda boleh menggunakan CSS. Berikut ialah beberapa contoh:

<code class="css">#progress-container {
  width: 100%;
  height: 5px;
  background-color: #f0f0f0;
}

#progress-bar {
  height: 100%;
  background-color: #008000;
}</code>

Kesimpulan

Dengan menggunakan pengendalian acara dan penggayaan CSS, anda boleh mencipta bar kemajuan dinamik yang menyampaikan status pemuatan secara visual kepada anda pengguna, mempertingkatkan pengalaman menyemak imbas mereka.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bar Kemajuan Dinamik untuk Pemuatan Halaman Anda?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!