Bar Kemajuan HTML
Standard W3C menentukan bahawa bar kemajuan melengkapkan tugas tertentu menggunakan elemen kemajuan. Pembangun menggunakan teg kemajuan untuk memaparkan bar kemajuan dan mewakili kemajuan muat naik fail pada halaman web. HTML menggabungkan teg ini, menawarkan pembangun web kaedah mudah untuk memaparkan bar. Teg ini berbeza sepenuhnya daripada
Sintaks:
Elemen kemajuan ini mempunyai kedua-dua teg permulaan dan penamat, dan di bawah menunjukkan sintaks asas teg. Ia membayangkan status sebarang proses. Bar kemajuan mempunyai adab paparan sebaris.
<Progress bar> …… </Progress bar>
Atribut
Atribut menyediakan elemen bermaklumat seperti gelagat peneroka dalam HTML. Terdapat tiga atribut dalam HTML: atribut acara dan atribut global. Selain atribut ini, elemen kemajuan mempunyai dua atribut baharu:
maks – Nilai lalai ialah 1.0 dan menunjukkan jumlah bilangan kerja yang diperlukan untuk menyelesaikan tugasan.
nilai – Ini menentukan jumlah kerja yang perlu diselesaikan. Nilai lalai ditetapkan sebagai kurang daripada 1.0. Sekiranya tiada atribut Val, bar kemajuan tidak dapat ditentukan.
Contoh bar kemajuan termasuk melampirkan fail, memuatkan dokumen untuk kali pertama atau memuatkan halaman web.
Kaedah untuk Mencipta Bar Kemajuan dalam HTML
Bar kemajuan mempunyai dua keadaan berbeza: tentu dan tak tentu. Dalam kes bar kemajuan tidak tentu, anda menetapkan nilai nol kepada atribut nilai, yang menjadikannya lebih mudah untuk digayakan. Sebaliknya, untuk keadaan penentu, anda mentakrifkan dua atribut baharu, maks dan nilai, seperti yang ditunjukkan dalam contoh di bawah. Ia menggunakan beberapa penampilan seperti gerakan untuk menunjukkan tugas dengan bar mendatar. Jika kerja masing-masing tidak bergantung pada tugas, maka < meter> tag diberikan. Mengenai keserasian penyemak imbas, ia menyokong semua pelayar kecuali Internet Explorer (sokongan separa). Bergantung pada bar kemajuan keserasian penyemak imbas mungkin kelihatan berbeza. Artikel ini akan menumpukan pada keadaan penentu bar dengan atribut maks dan Val.
Contoh: Sekarang, mari lihat pelaksanaan asas bar kemajuan dengan atribut min dan val.
<!DOCTYPE html> <html> <body> Downloading on process: <progress value="19" max="90"> </progress> <p><strong>Note:</strong> The progress tag is used to represent a progress bar for quite period of time. </p> </body> </html>
Output:
1. Menggunakan CSS
Seterusnya, kita akan melihat cara membuat bar kemajuan yang bergaya kelihatan konsisten pada semua platform. Untuk menanda bar kemajuan, kami menggunakan pemilih nilai dan melaraskan dimensi, seperti lebar dan ketinggian elemen kemajuan, untuk mencipta bar kemajuan yang menarik secara visual. Walau bagaimanapun, berurusan dengan pelayar yang berbeza boleh merumitkan proses ini. Penyemak imbas membuat beberapa pelarasan pada kaliber penyiapan tugas. Kami menjadikan bar html kelihatan jujur dengan menggunakan kesan dimensi.
Contoh:
<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar </h1>
<style>
progress{width:400px;height:40px}
</style>
</head>
<body>
<progress value="60" max="100"></progress>
</body>
</html>Output:
2. Menggunakan Bayang dan Warna Kotak
Dengan lembaran gaya, kita boleh menambah peraturan gaya pada elemen ini dengan memberikan warna latar belakang, menetapkan ketinggian, dsb. Warna boleh digunakan dengan menggunakan fungsi rgba(). Elemen bar kemajuan boleh dilakukan dengan warna yang berbeza untuk memaparkan hasil yang baik. Ini dipetakan dengan atribut 'class'. Secara amnya, bar kemajuan bergerak dari kiri ke kanan untuk menunjukkan tugas apabila ia bermula dari '0' awal dan memaparkan keputusan sebaik sahaja ia mencapai sasaran.
Contoh:
<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar demo </h1>
<style>
progress{width:200px;height:20px;background-color:pink;
border-radius: 4px;position: absolute;
right: 0px;
top: 80px;
box-shadow: 0 3px 6px rgba(255, 255, 0, 255) inset;}
</style>
</head>
<body>
<progress value="40" max="100"></progress>
</body>
</html>Output:
Sampel:
bar kemajuan :: – WebKit-Progress-bar
Malah saiz bar kemajuan boleh diubah dengan kecil, sederhana dan besar menggunakan atribut kelas.
3. Menggunakan Span
Kod di bawah tidak tentu, menunjukkan beberapa proses sedang berjalan untuk seketika.
Contoh:
<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar </h1>
<style>
progress{width:120px;height:20px}
</style>
</head>
<body>
<progress max="100">
<span>20</span>%
</progress>
</body>
</html>Output:
4. Menggunakan Contoh JavaScript
Peraturan berikut perlu dilakukan menggunakan javascript. Mencipta
Contoh #1
<!DOCTYPE>
<html>
<body>
<script>
var pgx=2;
function bar(){
var prog = document.getElementById ('progress demo');
setInterval (function ()
{
if(pgx<90){
pgx++;
prog.value =pgx;
}
bar();
}, 100);
}
</script>
<progress id="progress demo" min="2" max="100"></progress>
<br/><br/>
<button onclick="bar()"> submit</button>
</body>
</html>Output:
Contoh #2
<!DOCTYPE html>
<html lang="en">
<head>
<title>implementation of HTML progress Tag</title>
</head>
<body>
<h2> <i>Task in scheduled Progress </i></h2>
<p>Process: <progress id="bar" value="1" max="100"><span>0</span>%</progress></p>
<script type="text/javascript">
var k = 0;
var progb = document.getElementById("bar");
function count(){
if(k < 100){
k = k + 1;
progb.value = k;
progb.getElementsByTagName("span")[0].textContent = k;
}
setTimeout("count()", 400);
}
count();
</script>
</body>
</html>Output:
Conclusion
Therefore, this article explains how to create a highly flexible and lightweight HTML progress bar. Finally, we have briefly seen the concept as the activity indicator. This element indicates how to load a page or make some registration process and probably represents a percentage of 100 for the max value. When the length of the time task is unknown, developers usually use this mode in the installation or loading page scenario. And that’s even an implementation using Html5 with some cool effects.
Atas ialah kandungan terperinci Bar Kemajuan HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
