Cara menggunakan CSS untuk mencipta langkah pelaksanaan bar kemajuan memuatkan halaman web

Langkah untuk melaksanakan cara menggunakan CSS untuk mencipta bar kemajuan memuatkan halaman web

Dalam reka bentuk web moden, kelajuan memuatkan adalah penting untuk pengalaman pengguna. Untuk meningkatkan pengalaman pengguna, anda boleh menggunakan CSS untuk mencipta bar kemajuan pemuatan halaman web supaya pengguna dapat memahami dengan jelas kemajuan pemuatan halaman web. Artikel ini akan memperkenalkan langkah pelaksanaan menggunakan CSS untuk mencipta bar kemajuan memuatkan halaman web dan memberikan contoh kod khusus.

Langkah 1: Struktur HTML
Pertama, anda perlu menambah elemen div yang mewakili bar kemajuan dalam HTML, seperti yang ditunjukkan di bawah:

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

Langkah 2: Gaya CSS
Seterusnya, gunakan gaya CSS untuk mencantikkan bar kemajuan. Tetapkan gaya, warna, saiz dan sifat lain bar kemajuan. Berikut ialah contoh gaya CSS asas:

.progress-bar {
  width: 100%;
  height: 5px;
  background-color: #ccc;
}

Kod CSS ini akan mencipta bar kemajuan dengan lebar 100% dan ketinggian 5px, dan menetapkan warna latar belakang kepada kelabu.

Langkah 3: Memuatkan animasi kemajuan
Untuk menjadikan bar kemajuan menunjukkan kesan pemuatan, anda boleh menggunakan animasi CSS. Dalam contoh di bawah, bar kemajuan akan mengisi secara beransur-ansur daripada 0% hingga 100% dalam masa 5 saat:

.progress-bar {
  width: 0%;
  height: 5px;
  background-color: #ccc;
  animation: progress 5s both;
}

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

Dalam kod CSS ini, animasi kerangka utama digunakan untuk menganimasikan lebar bar kemajuan daripada 0% hingga 100%. Melalui atribut animasi, kemajuan nama animasi dan tempoh 5s ditentukan, dan kata kunci kedua-duanya digunakan untuk menunjukkan bahawa keadaan animasi terakhir dikekalkan selepas animasi tamat.

Langkah 4: Memuatkan kesan penyelesaian
Akhir sekali, anda boleh menambah beberapa kesan peralihan untuk membuat bar kemajuan hilang selepas halaman web dimuatkan sepenuhnya. Contoh berikut akan membuat bar kemajuan beransur hilang selepas pemuatan selesai:

.progress-bar {
  width: 0%;
  height: 5px;
  background-color: #ccc;
  animation: progress 5s both;
  transition: width 0.3s ease-in;
}

body.loaded .progress-bar {
  width: 100%;
}

body.loaded .progress-bar {
  width: 0%;
}

Dalam kod CSS ini, kesan kecerunan 0.3 saat ditambahkan pada lebar bar kemajuan melalui atribut peralihan dan selepas halaman web dimuatkan , ia ditambahkan pada elemen badan melalui JavaScript Tambah nama kelas yang dimuatkan untuk menukar lebar bar kemajuan secara beransur-ansur kepada 0%, dengan itu mencapai kesan bar kemajuan hilang.

Selepas empat langkah di atas, anda boleh menggunakan CSS untuk mencipta bar kemajuan memuatkan halaman web. Dengan melaraskan gaya CSS dan kesan animasi, anda boleh menyesuaikan penampilan dan kesan animasi bar kemajuan mengikut keperluan anda. Dalam aplikasi praktikal, kod JavaScript boleh digabungkan untuk mengawal status pemuatan bar kemajuan dan mengemas kini lebar bar kemajuan secara dinamik berdasarkan kemajuan pemuatan sebenar.

Saya harap artikel ini akan membantu anda dalam mempelajari CSS untuk mencipta bar kemajuan memuatkan halaman web!

Atas ialah kandungan terperinci Cara menggunakan CSS untuk mencipta langkah pelaksanaan bar kemajuan memuatkan halaman web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!