Ostatnio edytowany:

progress

Autor: Virtual Patriot

Przeznaczenie elementu progress

Element progress reprezentuje pasek postępu.

Dodatkowe techniczne informacje o elemencie progress

kategoria ogólna
kontekst zewnętrzny
  • element HTML, który tworzy wewnętrzny kontekst frazowany

    Przykładowy Kod HTML

    <fieldset>
      <legend>Pobieranie pliku</legend>
    
      <label>
        Postęp:
        <progress max="100" value="88">88%</progress>
        <script src="skrypt-01.js"></script>
      </label>
    </fieldset>

    Kontekstem zewnętrznym przykładowego elementu "progress" jest element "label". Wspomniany element "label" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "label", jest prawidłowym kontekstem zewnętrznym dla elementu "progress".

kontekst wewnętrzny
  • zawartość frazowana, lecz nie element progress jako element potomek

    Przykładowy Kod HTML

    <fieldset>
      <legend>Pobieranie pliku</legend>
    
      <label>
        Postęp:
        <progress max="100" value="88">88%</progress>
        <script src="skrypt-01.js"></script>
      </label>
    </fieldset>

    Kontekstem wewnętrznym przykładowego elementu "progress" jest wyłącznie tekst. Wspomniany tekst jest jednym z elementów, które należą do kategorii zawartość frazowana. Ponadto elementem potomkiem wspomnianego elementu "progress" nie jest element "progress", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli ciąg znaków "88", jest prawidłowym kontekstem wewnętrznym dla elementu "progress".

Element progress posiada zdolność fallback. Zdolność fallback elementu progress uaktywnia się w momencie gdy przeglądarka internetowa nie interpretuje elementu progress.

wymagane elementy dzieci
  • brak
wymagane atrybuty
  • brak
składnia HTML
  • <progress> ... </progress>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • nigdy
CSS display
  • inline (jeżeli przeglądarka internetowa nie interpretuje danego elementu progress)
  • inline-block (jeżeli przeglądarka internetowa interpretuje dany element progress)

Dodatkowe domyślne reguły CSS elementu progress

/* jeżeli przeglądarka internetowa interpretuje element "progress" */
progress {
  display:inline-block;
}

Interpretacja elementu progress

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 10

Edge

tak

Zobacz więcej informacji o interpretacji elementu .

Opis atrybutów elementu progress

max

Przeznaczenie atrybutu max

Atrybut max wykorzystany wraz z elementem progress określa maksymalną wartość, jaką może reprezentować dany element progress.

Wartość domyślna

1.0 (w każdej sytuacji)

Wartości atrybutu max

liczba

Należy podać liczbę dziesiętną większą od zera.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <fieldset>
      <legend>Pobieranie pliku</legend>

      <label>
        Postęp:
        <progress max="100" value="40">40%</progress>
      </label>
    </fieldset>

  </body>
</html>

Rezultat

Pobieranie pliku

Maksymalną wartością, jaką może reprezentować przykładowy element "progress" jest wartość "100", ponieważ do wspomnianego elementu "progress" został dodany atrybut "max" wraz z wartością "100".

value

Przeznaczenie atrybutu value

Atrybut value wykorzystany wraz z elementem progress określa wartość, jaką reprezentuje dany element progress w danej chwili.

Wartość domyślna

0 (w każdej sytuacji)

Wartości atrybutu value

liczba

Należy podać nieujemną liczbę dziesiętną.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <fieldset>
      <legend>Pobieranie pliku</legend>

      <label>
        Postęp:
        <progress max="100" value="40">40%</progress>
      </label>
    </fieldset>

  </body>
</html>

Rezultat

Pobieranie pliku

Wartością, jaka została przypisana do przykładowego elementu "progress" jest wartość "40", dlatego wartością, jaką reprezentuje wspomniany element "progress" jest wartość "40", ponieważ do wspomnianego elementu "progress" został dodany atrybut "value" wraz z wartością "40".

Wspomniana wartość nie może być większa niż wartość atrybutu max danego elementu "progress".