Bagaimana cara membuat Progress Bar di HTML?

Bilah kemajuan digunakan untuk menentukan pencapaian tertentu selama tugas hingga persentase. Anda dapat membuat bilah kemajuan dalam yang menentukan kemajuan penyelesaian tugas. Nilai bilah kemajuan dapat dimanipulasi oleh JavaScript. Pada artikel ini, kita akan melihat bagaimana Anda dapat membuat bilah kemajuan dengan bantuan HTML, CSS, dan JavaScript dalam urutan berikut:

• Bagaimana cara membuat Progress Bar di HTML?
• Progress Bar: Contoh

Mari kita mulai.

Bagaimana cara membuat Progress Bar di HTML?

Bilah Kemajuan menggambarkan kemajuan tugas apa pun yang sedang dilakukan. Umumnya, bilah ini digunakan untuk menunjukkan status unduh dan unggah. Kita dapat mengatakan bahwa Bilah Kemajuan dapat digunakan untuk menggambarkan status dari apa pun yang sedang berlangsung.

c ++ stl sort

Untuk membuat Progress Bar dasar menggunakan , langkah-langkah berikut perlu dilakukan:

• Buat struktur HTML untuk bilah kemajuan Anda - HTML menandai menentukan kemajuan penyelesaian tugas.

• Menambahkan CSS - Langkah selanjutnya adalah menambahkan warna latar belakang bilah kemajuan serta status kemajuan di bilah dengan bantuan CSS .

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 1% height: 35px background-color: # 4CAF50 text-align: center line-height: 32px color: black}

• Menambahkan JavaScript - Langkah selanjutnya adalah membuat bar progess animasi dinamis menggunakan fungsi javascript memperbarui dan tempat kejadian .

function update () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} else {width ++ element.style.width = lebar + '%'}}}

Sekarang setelah Anda mengetahui berbagai langkah untuk membuat bilah kemajuan, mari kita lanjutkan dan lihat contoh lengkap bilah kemajuan.

Progress Bar: Contoh

Setelah Anda menyelesaikan langkah-langkah yang berbeda untuk membuat bilah kemajuan, sekarang saatnya untuk menautkan HTML, CSS, dan Elemen JavaScript . Contoh berikut menunjukkan kode lengkap bilah kemajuan yang menghubungkan di atas HTML, CSS dan JavaScript Kode:

#Progress_Status {lebar: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}
Contoh Progress Bar Menggunakan JavaScript
 
Unduh Status File:
  
Mulai Download fungsi update () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identitas)} lain {width ++ element.style.width = width + '%'}}}

Keluaran:

Dengan ini, kita sampai pada akhir artikel kita. Saya harap Anda memahami berbagai langkah yang diperlukan untuk membuat bilah kemajuan.

Lihat kami yang dilengkapi dengan pelatihan langsung yang dipimpin instruktur dan pengalaman proyek kehidupan nyata. Pelatihan ini membuat Anda mahir dalam keterampilan untuk bekerja dengan teknologi web back-end dan front-end. Ini mencakup pelatihan tentang Pengembangan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.

Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar di blog ini dan kami akan menghubungi Anda kembali.