Com es crea una barra de progrés en HTML?

Les barres de progrés s’utilitzen per determinar determinades fites durant una tasca fins a un percentatge. Podeu crear una barra de progrés a que especifica el progrés de finalització d'una tasca. El valor de la barra de progrés es pot manipular amb JavaScript. En aquest article, veurem com podeu crear una barra de progrés amb l'ajut d'HTML, CSS i JavaScript en la següent seqüència:

vés a ordenar c ++

• Com es crea una barra de progrés en HTML?
• Barra de progrés: exemple

Anem a començar.

Com es crea una barra de progrés en HTML?

Una barra de progrés representa el progrés de qualsevol tasca que s'està duent a terme. Generalment, aquestes barres s’utilitzen per mostrar l’estat de descàrrega i càrrega. Podem dir que les barres de progrés es poden utilitzar per representar l’estat de qualsevol cosa que estigui en curs.

Per crear una barra de progrés bàsica mitjançant , cal dur a terme els passos següents:

• Crea una estructura HTML per a la barra de progrés - L'HTML etiqueta especifica el progrés de finalització d'una tasca.

• Addició de CSS - El següent pas és afegir el color de fons de la barra de progrés, així com l'estat de progrés a la barra amb l'ajuda de CSS .

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

• Addició de JavaScript - El següent pas és crear una barra de progrés animada dinàmica mitjançant funcions javascript actualització i escena .

actualització de la funció () {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 = ample + '%'}}}

Ara que ja coneixeu els diferents passos per crear una barra de progrés, anem a continuació i vegem l'exemple complet d'una barra de progrés.

Barra de progrés: exemple

Un cop hàgiu completat els diferents passos per crear una barra de progrés, és hora d’enllaçar l’HTML, CSS i Elements JavaScript . L'exemple següent mostra el codi complet de la barra de progrés que enllaça l'anterior HTML, CSS i JavaScript Codis:

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}
Exemple de barra de progrés amb JavaScript
 
Descarregar l'estat d'un fitxer:
  
Inicia la descàrrega de l'actualització de la funció () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} {width ++ element.style.width = ample + '%'}}}

Sortida:

Amb això, hem arribat al final del nostre article. Espero que hagueu entès els diferents passos necessaris per crear una barra de progrés.

Consulteu el nostre que inclou formació en directe dirigida per un instructor i experiència en projectes reals. Aquesta formació us permet dominar les habilitats necessàries per treballar amb tecnologies web d’interfície i front-end. Inclou formació sobre desenvolupament web, jQuery, Angular, NodeJS, ExpressJS i MongoDB.

Tens alguna pregunta? Si us plau, mencioneu-ho a la secció de comentaris d’aquest bloc i us respondrem.