Hoe maak je een voortgangsbalk in HTML?

De voortgangsbalken worden gebruikt om bepaalde mijlpalen tijdens een taak tot een percentage te bepalen. U kunt een voortgangsbalk maken in dat de voortgang van de voltooiing van een taak aangeeft. De waarde van de voortgangsbalk kan worden gemanipuleerd door JavaScript. In dit artikel zullen we zien hoe u een voortgangsbalk kunt maken met behulp van HTML, CSS en JavaScript in de volgende volgorde:

• Hoe maak je een voortgangsbalk in HTML?
• Voortgangsbalk: voorbeeld

Laten we beginnen.

Hoe maak je een voortgangsbalk in HTML?

Een voortgangsbalk geeft de voortgang weer van elke taak die wordt uitgevoerd. Over het algemeen worden deze balken gebruikt om de download- en uploadstatus weer te geven. We kunnen zeggen dat voortgangsbalken kunnen worden gebruikt om de status weer te geven van alles dat wordt uitgevoerd.

wat is abstractie in java met voorbeeld

Om een ​​basisvoortgangsbalk te maken met moeten de volgende stappen worden uitgevoerd:

• Maak een HTML-structuur voor uw voortgangsbalk - De HTML label specificeert een voltooiingsvoortgang van een taak.

• CSS toevoegen - De volgende stap is om de achtergrondkleur van de voortgangsbalk toe te voegen, evenals de voortgangsstatus in de balk met behulp van CSS .

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

• JavaScript toevoegen - De volgende stap is om een ​​dynamische geanimeerde voortgangsbalk te maken met javascript-functies bijwerken en tafereel .

functie update () {var element = document.getElementById ('myprogressBar') var breedte = 1 var identiteit = setInterval (scène, 10) functie scene () {if (breedte> = 100) {clearInterval (identiteit)} anders {breedte ++ element.style.width = breedte + '%'}}}

Nu u de verschillende stappen kent om een ​​voortgangsbalk te maken, gaan we verder en kijken naar het volledige voorbeeld van een voortgangsbalk.

Voortgangsbalk: voorbeeld

Nadat u de verschillende stappen heeft voltooid om een ​​voortgangsbalk te maken, is het tijd om de HTML, CSS en JavaScript-elementen . Het volgende voorbeeld toont de volledige code van de voortgangsbalk die het bovenstaande koppelt HTML, CSS en JavaScript Codes:

#Progress_Status {breedte: 50% achtergrondkleur: #ddd} #myprogressBar {breedte: 2% hoogte: 20px achtergrondkleur: # 4CAF50}
Voorbeeld van voortgangsbalk met JavaScript
 
Downloadstatus van een bestand:
  
Start Download functie update () {var element = document.getElementById ('myprogressBar') var breedte = 1 var identiteit = setInterval (scène, 10) functie scene () {if (breedte> = 100) {clearInterval (identiteit)} anders {width ++ element.style.width = width + '%'}}}

Uitgang:

Hiermee zijn we aan het einde van ons artikel gekomen. Ik hoop dat je de verschillende stappen hebt begrepen die nodig zijn om een ​​voortgangsbalk te maken.

Bekijk onze die wordt geleverd met live training onder leiding van een instructeur en real-life projectervaring. Deze training maakt je bedreven in vaardigheden om te werken met back-end en front-end webtechnologieën. Het omvat training over webontwikkeling, jQuery, Angular, NodeJS, ExpressJS en MongoDB.

Heeft u een vraag voor ons? Vermeld het in het opmerkingengedeelte van deze blog en we nemen zo snel mogelijk contact met je op.