Bagaimana untuk melaksanakan bar kemajuan dalam css

Pelaksanaan CSS bar kemajuan

Sebagai komponen biasa, bar kemajuan sering muncul dalam pelbagai tapak web dan aplikasi. Contohnya, kemajuan muat turun, kemajuan muat naik, kemajuan pemuatan halaman web, dsb. Sangat mudah untuk melaksanakan bar kemajuan menggunakan CSS Artikel ini akan memperkenalkan pembaca kepada kaedah melaksanakan bar kemajuan secara terperinci.

Struktur HTML

Untuk melaksanakan bar kemajuan mudah, anda perlu mentakrifkan struktur HTML terlebih dahulu. Berikut ialah struktur HTML yang paling asas:

<div class="progress">
  <div class="progress-bar"></div>
</div>

di mana, progress ialah bekas yang mewakili bar kemajuan dan progress-bar mewakili bar kemajuan itu sendiri. Sudah tentu, kita juga boleh menambah lebih banyak elemen dalam progress, seperti teks kemajuan dan sebagainya.

Gaya CSS

Seterusnya, kita perlu menambah gaya CSS untuk melaksanakan bar kemajuan.

Pertama sekali, anda perlu menetapkan lebar dan tinggi bekas progress dan tetapkan position: relative dan overflow: hidden dalam sifat CSS. Ini memastikan bar kemajuan dipaparkan dalam bekas dan menyembunyikan kandungan di luar bekas Pada masa yang sama, kedudukan bekas bar kemajuan ditetapkan kepada kedudukan relatif.

.progress {
  width: 100%;
  height: 20px;
  position: relative;
  overflow: hidden;
}

Kemudian, tetapkan kedudukan mutlak untuk progress-bar dan tetapkan jidar kiri kepada 0. Pada masa yang sama, tetapkan lebar bar kemajuan kepada 0 supaya bar kemajuan tidak akan dipaparkan pada permulaan.

.progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #007bff;
  transition: width 0.8s ease;
}

Penerangan kod:

• left: 0 bermaksud meletakkan bar kemajuan di bahagian paling kiri bekas.
• top: 0 bermaksud meletakkan bar kemajuan di bahagian atas bekas.
• width: 0 bermakna lebar awal bar kemajuan ialah 0, jadi ia tidak akan dipaparkan pada mulanya.
• height: 100% bermaksud menetapkan ketinggian bar kemajuan supaya setinggi bekas.
• background-color: #007bff ialah untuk menetapkan warna bar kemajuan.
• transition: width 0.8s ease bermaksud menggunakan animasi peralihan CSS untuk perlahan-lahan meningkatkan lebar bar kemajuan kepada nilai sasaran.

Akhir sekali, kami boleh menggunakan animasi JavaScript atau CSS untuk mengawal lebar bar kemajuan untuk memaparkan kemajuan. Berikut ialah contoh menggunakan JavaScript:

const progressBar = document.querySelector('.progress-bar');
let percentage = 0;

function progress() {
  if (percentage < 100) {
    percentage++;
    progressBar.style.width = percentage + '%';
  } else {
    clearInterval(intervalId);
  }
}

const intervalId = setInterval(progress, 20);

Contoh ini secara beransur-ansur meningkatkan lebar bar kemajuan daripada 0% kepada 100%, berhenti pada 100%. Kita juga boleh menentukan lebar dan kelajuan peningkatan bar kemajuan mengikut situasi sebenar.

Jika anda tidak mahu menggunakan JavaScript, kami juga boleh menggunakan animasi CSS untuk mencapai kesan bar kemajuan. Berikut ialah contoh animasi CSS mudah:

.progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #007bff;
  animation: progress 5s ease-in-out;
}

@keyframes progress {
  0% {
    width: 0;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 100%;
  }
}

Contoh ini secara beransur-ansur meningkatkan lebar bar kemajuan daripada 0% kepada 100% dan melengkapkannya dalam masa tertentu. Antaranya, atribut animation mentakrifkan nama, masa dan kaedah pelonggaran animasi. @keyframes mewakili kerangka utama yang mentakrifkan animasi bar kemajuan, daripada 0% hingga 100%.

Ringkasan

Di atas ialah cara melaksanakan bar kemajuan menggunakan CSS. Melalui gabungan struktur HTML dan gaya CSS, bar kemajuan asas boleh diselesaikan dengan mudah. Dari segi pelaksanaan, kita boleh menggunakan animasi JavaScript atau CSS untuk mengawal lebar bar kemajuan untuk memaparkan kemajuan. Dalam projek yang berbeza, gaya dan kaedah paparan bar kemajuan harus ditakrifkan mengikut situasi sebenar untuk mencapai hasil yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan bar kemajuan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!