Autor publikacji
Virtual Patriot - Administrator

progress

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu progress

Element progress reprezentuje pasek postępu.

Dodatkowe artykuły związane z elementem progress

brak

Informacje techniczne 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>
  </label>

  <script src="skrypt-01.js"></script>
</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>
  </label>

  <script src="skrypt-01.js"></script>
</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".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

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

składnia HTML

<progress> ... </progress>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

  • inline-block (jeżeli przeglądarka internetowa interpretuje element progress)

  • inline (jeżeli przeglądarka internetowa nie interpretuje elementu progress)

Przypuszczalnie 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

Atrybut Lokalny

max

Przeznaczenie atrybutu max

Atrybut max wykorzystany wraz z elementem progress pozwala nam określić 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ą lub liczbę całkowitą, w obu przypadkach liczbę 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".

Atrybut Lokalny

value

Przeznaczenie atrybutu value

Atrybut value wykorzystany wraz z elementem progress pozwala nam określić wartość, jaką powinien reprezentować dany element progress w danej chwili.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu value

liczba

Należy podać liczbę dziesiętną lub liczbę całkowitą, w obu przypadkach liczbę nieujemną.

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ą, jaką reprezentuje przykładowy element "progress" w danej chwili, jest wartość "40", ponieważ do wspomnianego elementu "progress" został dodany atrybut "value" wraz z wartością "40".

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