0Pricing
HTML Academy · Lekcja

Elementy progress i meter

Wyświetlanie postępu i wartości pomiarowych za pomocą natywnego HTML

Elementy progress i meter to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Element progress

Element <progress> przedstawia stopień ukończenia zadania:

<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 -->

Postęp nieokreślony

Bez atrybutu value postęp jest przedstawiany za pomocą animacji o nieokreślonym czasie trwania:

<!-- 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>

Animowanie postępu za pomocą JavaScriptu

Dynamiczna aktualizacja postępu:

<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>

Element meter

Element <meter> wyświetla wartość skalarną w znanym zakresie:

<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
-->

Atrybuty meter

Element meter ma kilka atrybutów służących do definiowania zakresów optymalnych i ostrzegawczych:

<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>

Stany kolorów meter

Przeglądarki oznaczają element meter kolorami na podstawie wartości low, high i 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>

Wykorzystanie meter do pokazywania użycia dysku

Typowy przypadek użycia elementu meter: użycie dysku lub pamięci:

<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>

Siła hasła z użyciem meter

Element meter można wykorzystać do pokazywania siły hasła:

<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>

Stylowanie progress i meter

Niestandardowe stylowanie elementów progress i 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; }

Dostępność progress

Należy dodać atrybuty ARIA, aby zapewnić lepszą obsługę czytników ekranu:

<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>

Podsumowanie: progress a meter

Najważniejsza różnica:

  • <progress> — ukończenie zadania w czasie; wartość rośnie w kierunku max; może być nieokreślona
  • <meter> — statyczna wartość skalarna; wartość jest już znana; ma strefy low, high i optimum

Kiedy używać poszczególnych elementów

Przewodnik po przypadkach użycia:

  • progress — przesyłanie pliku, kreator uzupełniania formularza, pasek ładowania
  • meter — użycie dysku, wskaźnik poziomu paliwa, ocena kredytowa, poziom naładowania baterii, trafność wyników wyszukiwania

Szybkie sprawdzenie

Który element jest odpowiedni do pokazania stopnia zapełnienia dysku twardego?

Powtórzenie: progress i meter

Najważniejsze informacje o elementach progress i meter:

  • <progress max value> — ukończenie zadania; bez value stan nieokreślony
  • <meter min max low high optimum value> — statyczna wartość pomiarowa
  • Przeglądarka automatycznie dobiera kolory elementu meter na podstawie położenia optimum
  • Należy dodać aria-valuenow/min/max, aby zapewnić obsługę czytników ekranu

Często zadawane pytania

Czy lekcja „Elementy progress i meter” jest bezpłatna?

Tak — pełny tekst „Elementy progress i meter” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Elementy progress i meter”?

Wyświetlanie postępu i wartości pomiarowych za pomocą natywnego HTML Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Elementy progress i meter”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. aside — treść uzupełniająca
  2. figure i figcaption — powtórzenie
  3. details i summary — widżet ujawniania treści
  4. Elementy progress i meter
← Powrót do HTML Academy