HTML progress-tag
Bij het uitvoeren van langdurige taken door een website, bijvoorbeeld een groot bestand downloaden, is het nuttig om iets
op het scherm te laten bewegen. De gebruiker ziet dan dat er wat gebeurt (of lijkt te gebeuren
).
Een goede aanpak is het gebruik van een zg. progress-bar of voortgangsbalk, een soort streep die langer wordt naarmate het proces vordert. Elders op deze site, in de rubriek "Berekeningen uitvoeren", vind je een aantal van dergelijke progress-bars, die allemaal geschreven zijn in HTML en JavaScript. Dat dateert uit de tijd dat HTML nog niet beschikte over een tag voor het maken van een progress-bar.
Met de komst van HTML5 is dat veranderd. In het volgende wordt de tag <progress> besproken.
Om <progress> goed te gebruiken heb je eigenlijk altijd een<label> nodig. Dat betekent dat <progress>
een id moet hebben dat de <progress>-tag aan het <label> koppelt.
De code voor een progress-bar in zijn eenvoudigste vorm is:
<label for="demo-1">Eenvoudige progress-bar : <label>
<progress id="demo-1" value="45" max="100"> 45 </progress>
Dit geeft op het scherm:
De tekst ' 45 ', die tussen de begin- en eindtag staat, verschijnt alleen in beeld als de browser <progress> niet ondersteunt. Dat heb je alleen met oudere browsers; je kunt het ook weg laten.
De attributen die specifiek zijn voor de <progress>-tag staan in de tabel hieronder:
| Eigenschap | Betekenis | |
| value | Lengte van het gekleurde deel van de balk. Dit is een getal dat niet groter mag zijn
dan max.
De lengte van het gekleurde deel wordt berekend met: Lengte = value / max × totale lengte van de balk. |
|
| max | Specificeert de omvang van de uit te voeren taak. De default-waarde is 1. Dat betekent dat, als je de default-waarde gebruikt, value een getal is tussen 0 en 1. |
Het verzetten van de balk doe je met JavaScript. Stel: Je wilt de waarde 45 vervangen door 65. De JavaScript- opdracht daarvoor is:
document.getElementById('demo-1').value = "65"Het gevolg is dat de blauwe balk langer wordt. Als je een lagere waarde opgeeft dan op dat moment is ingesteld, wordt de
balk korter.
Elke keer dat een deel van het (reken-)proces klaar is, moet je bovenstaande code gebruiken om de balk aan te passen.
Indeterminate progress-bar
De hierboven beschreven progress-bars zijn determinate (bepaald). Dat betekent dat de blauwe balk een zekere,
met value ingestelde, waarde heeft.
Als je value weglaat, wordt de progress-bar indeterminate (onbepaald). Zo'n progress-bar ziet er uit zoals hieronder.
De code is:
<label for="demo-1">Indeterminate progress-bar : <label>
<progress id="demo-1"> onbepaald </progress>
Een probleem met de opmaak
Er is met de tag <progress> is vreemds aan de hand:
- In Chromium-browsers is de balk blauw, op een witte ondergrond. In Windows is die achtergrond egaal wit en zijn de hoeken afgerond. in Android lijkt er een soort maatverdeling te zijn en zijn de hoeken scherp.
- In FireFox voor Windows is de balk groen op een lichtgrijze ondergrond. De balk heeft een animatie, zoals je die in Windows 7 gebruikelijk was (en bij sommige software nog aanwezig is in Windows 8 en 10). In de Android-versie van Firefox is de balk blauw, ontbreekt de animatie en is er een 'inset' reliëf rand.
- In de Chromium-browsers gehoorzaamt de opmaak niet aan de instellingen die in CSS zijn gemaakt voor wat betreft de kleuren.
Als je daar een background-color opgeeft (het maakt niet uit welke) dan krijgt de progress-bar dit uiterlijk:
- FireFox verwerkt de kleur van de achtergrond goed, maar de groene balk is nu blauw, zonder de animatie
De moraal van dit verhaal: (Op het moment dat dit geschreven wordt)
Wees voorzichtig met de HTML <progress>-tag. Als je wilt dat de progress-bar er in elke browser er hetzelfde
uitziet, programmeer hem dan zelf of gebruik een progress-bar die je in veel platforms (o.a. Bootstrap, W3) kunt vinden.
Opmerking:
Voor meer statische zaken zoals een percentage disk gebruik of een aantal bezoekers, gebruik je tag
<meter>.
