PricingLoginStart free
HTML Academy · Les

De elementen progress en meter

Toon voortgang en meetwaarden met native HTML

Les 4 van 414 stappen

De elementen progress en meter is een gratis HTML Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML Academy bevat in totaal 4 lessen.

Het progress-element

Het <progress>-element geeft de voltooiing van een taak weer:

<label for="upload">File upload progress:</label>
<progress id="upload" max="100" value="72">72%</progress>
<!-- max: total amount of work (default: 1) -->
<!-- value: amount of work done -->
<!-- Content between tags: fallback for old browsers -->

Onbepaalde voortgang

Zonder een value toont progress een onbepaalde animatie:

<!-- Indeterminate: value not set -->
<progress id="loading">Loading...</progress>
<!-- Browser shows a cycling animation (no value known) -->

<!-- Set value when progress is known: -->
<script>
document.getElementById('loading').value = 45;
// Now shows 45% complete (with max=1: 0.45 = 45%)
</script>

Voortgang animeren met JavaScript

Werk de voortgang dynamisch bij:

<progress id="task" max="100" value="0"></progress>
<span id="pct">0%</span>

<script>
let progress = 0;
const bar = document.getElementById('task');
const pct = document.getElementById('pct');

const interval = setInterval(() => {
  progress += 10;
  bar.value = progress;
  pct.textContent = progress + '%';
  if (progress >= 100) clearInterval(interval);
}, 500);
</script>

Het meter-element

Het <meter>-element toont een scalaire meting binnen een bekend bereik:

<meter min="0" max="100" value="72">72 out of 100</meter>
<!-- Unlike progress (task completion), meter shows a static measurement:
  - Disk usage
  - Password strength
  - Score or rating
  - Fuel level
-->

Attributen van meter

meter heeft verschillende attributen om optimale en waarschuwingsbereiken te definiëren:

<meter
  min="0"      <!-- minimum possible value -->
  max="100"   <!-- maximum possible value -->
  low="30"    <!-- threshold: below this = low -->
  high="70"   <!-- threshold: above this = high -->
  optimum="50" <!-- where the optimal value lies -->
  value="85"
>85/100</meter>

Kleurtoestanden van meter

Browsers geven meter een kleur op basis van low/high/optimum:

<!-- optimum is in the low range: low values are good (e.g., error count) -->
<meter min="0" max="100" low="30" high="70" optimum="0" value="10">
  10 errors  <!-- green: value is in the good zone -->
</meter>

<!-- optimum is in the high range: high values are good (e.g., score) -->
<meter min="0" max="100" low="40" high="80" optimum="100" value="55">
  55 points  <!-- yellow: between low and high -->
</meter>

Schijfgebruik met meter

Klassiek gebruik van meter: schijf- of geheugengebruik:

<label for="disk">Disk usage:</label>
<meter
  id="disk"
  min="0"
  max="500"
  low="400"
  high="450"
  optimum="0"
  value="420"
>420 GB of 500 GB used</meter>
<p>420 GB of 500 GB used (84%)</p>

Wachtwoordsterkte met meter

Gebruik meter om de wachtwoordsterkte weer te geven:

<label for="pwd">Password</label>
<input type="password" id="pwd">
<label for="strength">Strength:</label>
<meter id="strength" min="0" max="4" low="1" high="3" optimum="4" value="0"></meter>

<script>
document.getElementById('pwd').addEventListener('input', function() {
  const strength = calculateStrength(this.value); // 0-4
  document.getElementById('strength').value = strength;
});
</script>

progress en meter opmaken

Aangepaste opmaak voor progress en meter:

/* Basic progress styling */
progress {
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  border: none;
}

progress::-webkit-progress-bar { background: #e2e8f0; }
progress::-webkit-progress-value { background: #0070f3; }
progress::-moz-progress-bar { background: #0070f3; }

Toegankelijkheid van progress

Voeg ARIA-attributen toe voor betere ondersteuning van schermlezers:

<label for="upload">Upload progress</label>
<progress
  id="upload"
  max="100"
  value="65"
  aria-valuenow="65"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="File upload: 65% complete"
>65%</progress>

Samenvatting van progress versus meter

Belangrijkste verschil:

  • <progress> — voltooiing van een taak in de loop van de tijd; value neemt toe richting max; kan onbepaald zijn
  • <meter> — statische scalaire meting; value is al bekend; heeft low/high/optimum-zones

Wanneer gebruik je elk element

Handleiding voor gebruikssituaties:

  • progress — uploaden van bestanden, wizard voor het invullen van een formulier, laadindicator
  • meter — schijfgebruik, brandstofmeter, kredietscore, batterijniveau, relevantie van zoekresultaten

Korte controle

Welk element is geschikt om weer te geven hoe vol een harde schijf is?

Beantwoord dit in de interactieve les

Samenvatting: progress en meter

Essentiële punten van progress en meter:

  • <progress max value> — voltooiing van een taak; onbepaald zonder value
  • <meter min max low high optimum value> — statische meting
  • De browser geeft meter automatisch een kleur op basis van de positie van optimum
  • Voeg aria-valuenow/min/max toe voor ondersteuning van schermlezers
Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen
40
Lessen
159
Gratis beginnen met lerenBekijk de volledige cursus

Veelgestelde vragen

Is de les “De elementen progress en meter” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad HTML Academy, waaronder “De elementen progress en meter”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus HTML Academy bevat in totaal 4 lessen.

Wat leer ik in “De elementen progress en meter”?

Toon voortgang en meetwaarden met native HTML Je oefent met HTML Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met HTML Academy te beginnen?

Ervaring vooraf is niet nodig. HTML Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “De elementen progress en meter”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over HTML Academy?

Ja. Elke les over HTML Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

  1. aside voor aanvullende inhoud
  2. figure en figcaption opnieuw bekeken
  3. details en summary als openbaarmakingswidget
  4. De elementen progress en meter
← Terug naar HTML Academy