Bagaimana untuk menetapkan warna bar kemajuan menggunakan HTML dan CSS?

Dalam pembangunan laman web, bar kemajuan adalah bahagian penting dalam laman web. Bar kemajuan menunjukkan kemajuan proses. Dengan bantuannya, pengguna boleh melihat status kerja yang dilakukan di tapak web, termasuk masa muat, muat naik fail, muat turun fail dan tugas lain yang serupa. Secara lalai, ia berwarna kelabu. Walau bagaimanapun, untuk menjadikan bar kemajuan menonjol dan menarik secara visual, anda boleh menggunakan HTML dan CSS untuk menukar warnanya.

Apakah bar kemajuan?

Bar kemajuan digunakan untuk menunjukkan kemajuan tugas. Ia adalah elemen antara muka pengguna grafik. Ia pada asasnya terdiri daripada bar mendatar yang diisi secara beransur-ansur semasa tugas berjalan, disertai dengan nilai peratusan atau penunjuk penyiapan lain. Bar kemajuan digunakan dalam aplikasi web untuk memberikan maklum balas kepada pengguna tentang tempoh masa yang diperlukan untuk menyelesaikan proses seperti muat naik fail, muat turun fail atau pemasangan perisian.

Buat bar kemajuan menggunakan HTML

Bar kemajuan boleh dibuat menggunakan bahasa penanda HTML. Dalam HTML5, anda boleh mencipta bar kemajuan menggunakan elemen Berikut ialah contoh mencipta bar kemajuan asas menggunakan HTML:

<progress value="30" max="100"></progress>

Dalam contoh di atas, kami mencipta bar kemajuan dan memaparkan bar kemajuan sebagai 30% selesai, menetapkan atribut nilai kepada 30. Atribut maksimum ditetapkan kepada 100.

Contoh 1

Contoh 1

Berikut ialah contoh kod lengkap untuk mencipta bar kemajuan asas menggunakan HTML

   
Create a basic progress bar Using HTML
   <progress value="30" max="100"></progress>
   

Tetapkan gaya bar kemajuan

Selepas mencipta bar kemajuan, kami boleh menggayakannya menggunakan CSS dan menetapkan warnanya. CSS menyediakan pembangun dengan ::-webkit-progress-value pseudo-element untuk menetapkan warna bar kemajuan. Di bawah ialah contoh menggunakan gaya CSS pada bar kemajuan.

progress {
   width: 300px;
   height : 25px;
   border: 2px solid gray;
}
progress::-webkit-progress-bar {
   background-color: green;
}
progress::-webkit-progress-value {
   background-color: red;
}

Kami menetapkan warna latar belakang kedua-dua ::-webkit-progress-bar dan ::-webkit-progress-value pseudo-elements. Pada masa yang sama, kami menetapkan ketinggian dan lebar bar kemajuan dengan menyasarkan elemen

Contoh 2

Di bawah ialah contoh kod lengkap untuk mencipta bar kemajuan menggunakan HTML dan CSS.

   



   
Create progress bar Using HTML and CSS
   <progress value="30" max="100"></progress>

Tambah teks pada bar kemajuan

Berikan maklumat tambahan kepada pengguna dengan menambahkan teks pada bar kemajuan. Untuk melakukan ini, kami mencipta dua lapisan menggunakan ::-webkit-progress-bar pseudo-element dan ::-webkit-progress-value pseudo-element, di mana lapisan nilai kemajuan berada di atas lapisan bar kemajuan. Contohnya -

progress {
   position: absolute;
   height: 24px;
   width: 300px;
   border: 1px solid #fff;
}
progress::before {
   content: "Loading: " attr(value) "%";
   position: absolute;
   width: 100%;
   text-align: center;
   font-size: 18px;
   color: blue;
}
progress::-webkit-progress-bar {
   background-color: orange;
}
progress::-webkit-progress-value {
   background-color: red;
}

Dalam contoh di atas, kami menambah ::sebelum unsur pseudo pada elemen . Ia akan memaparkan nilai kemajuan sebagai teks di bahagian atas bar kemajuan. Kami juga membetulkan teks di tengah bar kemajuan dan menetapkan saiz fonnya kepada 18px.

Contoh 3

Berikut ialah contoh kod lengkap untuk menambahkan teks pada bar kemajuan.

   



   
Create progress with additional information bar Using CSS
   <progress value="30" max="100"></progress>

Kesimpulan

Di sini, kami membincangkan bagaimana bar kemajuan ialah alat yang berharga dalam pembangunan web. Ia memberikan maklum balas kepada pengguna tentang kemajuan kerja di tapak web. Ia juga boleh disesuaikan agar sesuai dengan reka bentuk keseluruhan tapak web.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan warna bar kemajuan menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!