HTML
Voortgangselement
Zoeken…
parameters
| Parameter | Waarde |
|---|---|
| max | Hoeveel werk de taak in totaal vereist |
| waarde | Hoeveel van het werk is al volbracht |
| positie | Dit kenmerk retourneert de huidige positie van het element <progress> |
| labels | Dit kenmerk retourneert een lijst met <progress> -elementlabels (indien aanwezig) |
Opmerkingen
Het element <progress> wordt niet ondersteund in versies van Internet Explorer minder dan 10
Het element <progress> is het verkeerde element dat moet worden gebruikt voor iets dat slechts een meter is, in plaats van de voortgang van de taak. Het tonen van het gebruik van schijfruimte met behulp van het element <progress> is bijvoorbeeld ongepast. In plaats daarvan is het element <meter> beschikbaar voor dit soort gebruikssituaties.
Vooruitgang
Het element <progress> is nieuw in HTML5 en wordt gebruikt om de voortgang van een taak weer te geven
<progress value="22" max="100"></progress>
Dit zorgt voor een balk gevuld 22%
De kleur van een voortgangsbalk wijzigen
Voortgangsbalken kunnen worden vormgegeven met de progress[value] selector.
Dit voorbeeld geeft een voortgangsbalk een breedte van 250px en een hoogte van 20 20px
progress[value] {
width: 250px;
height: 20px;
}
Voortgangsbalken kunnen bijzonder moeilijk te stijlen zijn.
Chrome / Safari / Opera
Deze browsers gebruiken de selector -webkit-appearance om de voortgangstag te stijlen. Om dit te negeren, kunnen we het uiterlijk opnieuw instellen.
progress[value] {
-webkit-appearance: none;
appearance: none;
}
Nu kunnen we de container zelf stylen
progress[value]::-webkit-progress-bar {
background-color: "green";
}
Firefox
Firefox stileert de voortgangsbalk een beetje anders. We moeten deze stijlen gebruiken
progress[value] {
-moz-appearance: none;
appearance: none;
border: none; /* Firefox also renders a border */
}
Internet Explorer
Internet Explorer 10+ ondersteunt het progress . Het biedt echter geen ondersteuning voor de eigenschap background-color . In plaats daarvan moet u de eigenschap color gebruiken.
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none; /* Remove border from Firefox */
width: 250px;
height: 20px;
color: blue;
}
HTML Fallback
Voor browsers die het progress niet ondersteunen, kunt u dit als tijdelijke oplossing gebruiken.
<progress max="100" value="20">
<div class="progress-bar">
<span style="width: 20%;">Progress: 20%</span>
</div>
</progress>
Browsers die de voortgangstag ondersteunen, negeren de div-genestelde binnenkant. Oudere browsers die de voortgangstag niet kunnen identificeren, geven in plaats daarvan de div.
