Kako stvoriti traku napretka u HTML-u?



Traka napretka u HTML-u prikazuje napredak bilo kojeg zadatka koji se izvršava. Općenito se ove trake koriste za prikaz statusa preuzimanja i prijenosa.

Trake napretka koriste se za određivanje određenih prekretnica tijekom zadatka na postotak. Možete stvoriti traku napretka u koja određuje napredak dovršenja zadatka. Vrijednošću trake napretka može se upravljati JavaScriptom. U ovom ćemo članku vidjeti kako možete stvoriti traku napretka uz pomoć HTML-a, CSS-a i JavaScript-a u sljedećem slijedu:

Započnimo.





Kako stvoriti traku napretka u HTML-u?

Traka napretka prikazuje napredak bilo kojeg zadatka koji se izvršava. Općenito se ove trake koriste za prikaz statusa preuzimanja i prijenosa. Možemo reći da se trake napretka mogu koristiti za prikaz statusa bilo čega što je u tijeku.

traka napretka - Edureka



strukture podataka i algoritmi

Da biste stvorili osnovnu traku napretka pomoću , potrebno je izvršiti sljedeće korake:

  • Stvorite HTML strukturu za traku napretka - HTML označiti određuje napredak dovršenja zadatka.
 
  • Dodavanje CSS-a - Sljedeći je korak dodavanje boje pozadine trake napretka kao i statusa napretka u traci uz pomoć CSS .
#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 1% height: 35px background-color: # 4CAF50 text-align: center-height: 32px color: black}
  • Dodavanje JavaScript-a - Sljedeći korak je stvaranje dinamične animirane proges trake pomoću funkcije javascripta Ažuriraj i scena .
ažuriranje funkcije () {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 = širina + '%'}}}

Sad kad znate različite korake za stvaranje trake napretka, krenimo dalje i pogledajte cjeloviti primjer trake napretka.

Traka napretka: Primjer

Nakon što dovršite različite korake za stvaranje trake napretka, vrijeme je da povežete HTML, CSS i JavaScript elementi . Sljedeći primjer prikazuje cjeloviti kod trake napretka koji povezuje gore navedeno HTML, CSS i JavaScript Kodovi:



#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}

Primjer trake napretka pomoću JavaScript-a

Status preuzimanja datoteke:


Započnite ažuriranje funkcije preuzimanja () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) scene funkcije () {if (width> = 100) {clearInterval (identity)} else {širina ++ element.style.width = širina + '%'}}}

Izlaz:

Ovime smo došli do kraja našeg članka. Nadam se da ste razumjeli različite korake potrebne za stvaranje trake napretka.

Pogledajte naš koja dolazi s treningom uživo pod vodstvom instruktora i iskustvom u stvarnom životu. Ovaj trening čini vas vještima za rad s back-end i front-end web tehnologijama. Uključuje obuku o web razvoju, jQueryju, Angularu, NodeJS, ExpressJS i MongoDB.

Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare ovog bloga i mi ćemo vam se javiti.