Paano Lumikha ng isang Progress Bar sa HTML?

Ginagamit ang mga progress bar upang matukoy ang ilang mga milestones sa panahon ng isang gawain hanggang sa isang porsyento. Maaari kang lumikha ng isang progress bar sa na tumutukoy sa pagkumpleto ng pag-unlad ng isang gawain. Ang manipis na bar ng pag-usad ay maaaring manipulahin ng JavaScript. Sa artikulong ito, makikita natin kung paano ka makakalikha ng isang progress bar sa tulong ng HTML, CSS, at JavaScript sa sumusunod na pagkakasunud-sunod:

• Paano Lumikha ng isang Progress Bar sa HTML?
• Progress Bar: Halimbawa

Magsimula na tayo.

Paano Lumikha ng isang Progress Bar sa HTML?

Inilalarawan ng isang Progress Bar ang pag-usad ng anumang gawain na isinasagawa. Pangkalahatan, ginagamit ang mga bar na ito upang ipakita ang katayuan sa pag-download at pag-upload. Maaari nating sabihin na ang Mga Progress Bar ay maaaring magamit upang ilarawan ang katayuan ng anumang nasa isinasagawa.

Upang lumikha ng isang pangunahing Progress Bar na ginagamit , ang mga sumusunod na hakbang ay kailangang isagawa:

kontrolin ang mga pahayag ng daloy sa java

• Lumikha ng istraktura ng HTML para sa iyong progress bar - Ang HTML tag tumutukoy sa isang pag-unlad ng pagkumpleto ng isang gawain.

• Pagdaragdag ng CSS - Ang susunod na hakbang ay upang magdagdag ng kulay ng background ng progress bar pati na rin ang status ng pag-usad sa bar sa tulong ng CSS .

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

• Pagdaragdag ng JavaScript - Ang susunod na hakbang ay upang lumikha ng isang dynamic na animated progess bar na ginagamit pag-andar ng javascript pag-update at eksena .

pag-update ng function () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function ng eksena () {if (width> = 100) {clearInterval (pagkakakilanlan)} iba pa {lapad ++ element.style.width = lapad + '%'}}}

Ngayong alam mo na ang iba't ibang mga hakbang upang lumikha ng isang progress bar, magpatuloy tayo at tingnan ang kumpletong halimbawa ng isang progress bar.

Progress Bar: Halimbawa

Kapag nakumpleto mo na ang iba't ibang mga hakbang upang lumikha ng isang progress bar, oras na upang mai-link ang HTML, CSS at Mga elemento ng JavaScript . Ipinapakita ng sumusunod na halimbawa ang kumpletong code ng progress bar na nag-uugnay sa itaas HTML, CSS at JavaScript Mga code:

#Progress_Status {lapad: 50% background-color: #ddd} #myprogressBar {lapad: 2% taas: 20px background-color: # 4CAF50}
Halimbawa ng Progress Bar Gamit ang JavaScript
 
Katayuan ng Pag-download ng isang File:
  
Simulang Mag-download ng pag-andar ng pag-andar () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (pagkakakilanlan)} pa {lapad ++ element.style.width = lapad + '%'}}}

Output:

Sa pamamagitan nito, napunta kami sa dulo ng aming artikulo. Inaasahan kong naunawaan mo ang iba't ibang mga hakbang na kinakailangan upang lumikha ng isang progress bar.

Suriin ang aming na kasama ng live na pagsasanay na pinamunuan ng magtuturo at karanasan sa proyekto sa totoong buhay. Ang pagsasanay na ito ay gumagawa sa iyo ng kasanayan sa mga kasanayan upang gumana sa back-end at front-end na mga teknolohiya sa web. Kabilang dito ang pagsasanay sa Pag-unlad sa Web, jQuery, Angular, NodeJS, ExpressJS, at MongoDB.

May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento ng blog na ito at babalikan ka namin.