Element progress

> Dodaj do ulubionych

Element HTML progress reprezentuje post─Öp wykonywania procesu lub zadania. Wygl─ůd tego elementu na stronie jest zale┼╝ny od przegl─ůdarki, ale najcz─Ö┼Ťciej jest to pasek post─Öpu.

Kontekst u┼╝ycia

Modele tre┼Ťci HTML5tre┼Ť─ç og├│lna, syntagmatyczna, etykietowalna
Elementy nadrz─Ödneelementy tre┼Ťci syntagmatycznej
Elementy potomne

elementy tre┼Ťci syntagmatycznej, z wy┼é─ůczeniem innych element├│w progress

ZnacznikiZnaczniki otwieraj─ůcy i zamykaj─ůcy s─ů obowi─ůzkowe
NormyHTML 5 — podrozdzia┼é 4.10.16
Interfejs DOMHTMLProgressElement
R├│┼╝nice mi─Ödzy HTML 4.01 a HTML 5

Element progress został dodany w języku HTML 5

Obs┼éuga przez przegl─ůdarki

FirefoxChromeOperaSafariInternet Explorer

Atrybuty obowi─ůzkowe

Element HTML progress nie ma atrybut├│w obowi─ůzkowych.

Atrybuty opcjonalne

Atrybuty globalne oraz:

AtrybutOpis
max

Okre┼Ťla ile pracy og├│lnie wymaga wykonanie danego zadania. Warto┼Ťci─ů tego atrybutu musi by─ç liczba zmiennoprzecinkowa

valueOkre┼Ťla post─Öp wykonywania zadania. Warto┼Ťci─ů tego atrybutu musi by─ç liczba zmiennoprzecinkowa

Uwagi

Elementu progress nie nale┼╝y u┼╝ywa─ç do oznaczania zwyk┼éych mierzalnych warto┼Ťci, np. poziomu zaj─Öto┼Ťci dysku. Do tego typu zastosowa┼ä przeznaczony jest element meter.

Element HTML progress ÔÇô szczeg├│┼éowy opis

Podstawowa składnia elementu progress:

<progress></progress>

Wynik:

Zgodnie ze specyfikacj─ů W3C element progres reprezentuje post─Öp wykonywania zadania. Musi mie─ç znacznik otwieraj─ůcy (<progress>) i zamykaj─ůcy (</progress>), mimo ┼╝e wygl─ůda jak tzw. element zast─Öpowany (podobnie jak elementy input). Jest to niezwykle pomocne przy stosowaniu pomocniczej tre┼Ťci, kt├│r─ů zastosujemy p├│┼║niej.

Obok głównych atrybutów, element <progress> może mieć jeszcze dwa inne:

  • max ÔÇô wskazuje jak du┼╝o zosta┼éo do wykonania, aby uzna─ç proces za sko┼äczony. Je┼Ťli nie zostanie okre┼Ťlony, domy┼Ťlna warto┼Ť─ç wynosi 1.0
  • value ÔÇô okre┼Ťla obecny stan post─Öpu. Musi by─ç wi─Ökszy b─ůd┼║ r├│wny 0.0 i mniejszy lub r├│wny 1.0 lub mie─ç warto┼Ť─ç atrybutu max (je┼Ťli r├│wnie┼╝ zosta┼é zdefiniowany).

Stany paska post─Öpu

Pasek post─Öpu mo┼╝e mie─ç dwa stany ÔÇô nieokre┼Ťlony i okre┼Ťlony.

Stan nieokre┼Ťlony

Nieokre┼Ťlony stan paska post─Öpu w Chrome 29 na Mac OS 10.8:

Nieokre┼Ťlony stan paska post─Öpu

W zale┼╝no┼Ťci od przegl─ůdarki i systemu operacyjnego, pasek post─Öpu mo┼╝e mie─ç r├│┼╝ny wygl─ůd. Zoltan ÔÇ×Du LacÔÇŁ Hawryluk opisuje w swoim artykule (warto przeczyta─ç) zachowania elementu progress w r├│┼╝nych przegl─ůdarkach. Wufoo ma zrzuty ekranu paska post─Öpu w r├│┼╝nych systemach operacyjnych.

Bardzo ┼éatwo jest znale┼║─ç i sformatowa─ç nieokre┼Ťlony pasek post─Öpu, poniewa┼╝ wiemy ┼╝e nie ma on atrybutu value. Do formatowania mo┼╝emy u┼╝y─ç pseudoklasy :not().

progress:not([value]) {
   /* Formatowanie*/
}

Stan okre┼Ťlony

W tym artykule skupimy si─Ö wy┼é─ůcznie na formatowniu okre┼Ťlonego stanu paska post─Öpu. Zmie┼ämy wi─Öc jego stan poprzez dodanie atrybut├│w max i value.

<progress max="100" value="80"></progress>

Tak wygl─ůda pasek post─Öpu w Chrome 29 w systemie Mac OS 10.8, pozbawiony styl├│w CSS.

Okre┼Ťlony stan paska post─Öpu w Chrome 29 na Mac OS 10.8

Pami─Ötaj, ┼╝e dodanie atrybutu max nie zmieni stanu paska post─Öpu, poniewa┼╝ przegl─ůdarka nie wie jak─ů warto┼Ť─ç ma przedstawia─ç.

To wszystko co mo┼╝emy zrobi─ç za pomoc─ů HTML, reszt─ů zajmie si─Ö CSS. W tym miejscu nie martwmy si─Ö o obs┼éug─Ö omawianego elementu przez starsze przegl─ůdarki, kt├│re go nie rozpoznaj─ů.

Formatowanie paska post─Öpu

Mo┼╝emy namierzy─ç okre┼Ťlony pasek post─Öpu, korzystaj─ůc z selektora progress[value]. Sam progress te┼╝ mo┼╝e by─ç, je┼Ťli wiadomo, ┼╝e w kodzie nie ma ┼╝adnych nieokre┼Ťlonych pask├│w post─Öpu. B─Öd─Ö korzysta┼é z pierwszej metody, poniewa┼╝ lepiej rozr├│┼╝nia te dwa stany. Tak jak ka┼╝demu innemu elementowi , paskowi post─Öpu mo┼╝na nada─ç wymiary przy u┼╝yciu w┼éasno┼Ťci width i height:


progress[value] {
  width: 250px;
  height: 20px;
}

Tu ko┼äczy si─Ö przyjemna cz─Ö┼Ť─ç i zaczynaj─ů si─Ö problemy, poniewa┼╝ ka┼╝da kategoria przegl─ůdarek formatuje pasek post─Öpu przy u┼╝yciu innych pseudoklas. Upro┼Ťcimy spraw─Ö i nie b─Ödziemy specjalnie przejmowa─ç si─Ö tym, kt├│ra wersja przegl─ůdarki obs┼éuguje element progress. Wszystkie niedogodno┼Ťci rozwi─ů┼╝emy stosuj─ůc rozwi─ůzanie pomocnicze. Wyr├│┼╝niamy nast─Öpuj─ůce rodzaje przegl─ůdarek:

  • WebKit/Blink
  • Firefox
  • Internet Explorer

WebKit/Blink (Chrome, Safari, Opera)

Google Chrome, Apple Safari, a tak┼╝e najnowsza wersja Opery (16+) nale┼╝─ů do jednej kategorii. Jest to oczywi┼Ťcie zas┼éuga styl├│w CSS przegl─ůdarek Webkit, kt├│re u┼╝ywaj─ů w┼éasno┼Ťci -webkit-appearance: progress-bar do okre┼Ťlania wygl─ůdu elementu progress.

Arkusz styl├│w przegl─ůdarek opartych na webkit

Do resetowania styl├│w u┼╝yjemy w┼éasno┼Ťci -webkit-appearance z warto┼Ťci─ů none.


progress[value] {
  /* Nadpisywanie domy┼Ťlnych styl├│w */
  -webkit-appearance: none;
   appearance: none;

  width: 250px;
  height: 20px;
}
Domy┼Ťlny wygl─ůd paska post─Öpu

Podczas dalszej inspekcji elementu progress w narzędziach deweloperskich Chrome, możemy zobaczyć jak zostało to zaimplementowane.

Zrzut ekranu narz─Ödzi deweloperskich chrome

Webkit/Blink maj─ů dwie pseudoklasy do formatowania elementu progress:

  • -webkit-progress-bar ÔÇô pseudoklasa formatuj─ůca kontener elementu progress. W tym przyk┼éadzie zmienimy kolor t┼éa, obramowanie i dodamy wewn─Ötrzny cie┼ä dla kontenera.
  • -webkit-progress-value ÔÇô pseudoklasa formatuj─ůca warto┼Ť─ç paska post─Öpu. W┼éasno┼Ť─ç background-color domy┼Ťlnie ustawiona jest na green, co mo┼╝emy sprawdzi─ç w narz─Ödziach deweloperskich. W tym przyk┼éadzie stworzymy efekt przesuwaj─ůcychy si─Ö pask├│w za pomoc─ů gradientu liniowego we w┼éasno┼Ťci background-image.

Najpierw nadamy styl kontenerowi przy u┼╝yciu w┼éasno┼Ťci -webkit-progress-bar:


progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
Kontener paska post─Öpu z nadanym stylem

Nast─Öpnie dodamy styl dla paska przy u┼╝yciu w┼éasno┼Ťci -webkit-progress-value, definiuj─ůc kilka gradient├│w t┼éa. Jeden dla pask├│w, cienie na g├│rze i na dole, przej┼Ťcia kolor├│w z prawej do lewej. Skorzystamy z prefiksu -Webkit dla gradient├│w, poniewa┼╝ u┼╝ywamy go tak┼╝e dla samego paska post─Öpu.


progress[value]::-webkit-progress-value {
  background-image:
	   -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #09c, #f44);

    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
}
Pasek z nadanymi stylami

Animacje

W czasie pisania tego artyku┼éu tylko przegl─ůdarki oparte na silniku Webkit/Blink obs┼éugiwa┼éy animacje elementu progress. Dodamy animacj─Ö wykorzystuj─ůc w┼éasno┼Ť─ç -webkit-progress-value i zmieniaj─ůc pozycj─Ö t┼éa.


@-webkit-keyframes animate-stripes {
   100% { background-position: -100px 0px; }
}

@keyframes animate-stripes {
   100% { background-position: -100px 0px; }
}

Zastosujemy t─Ö animacj─Ö do selektora -webkit-progress-value:


-webkit-animation: animate-stripes 5s linear infinite;
        animation: animate-stripes 5s linear infinite;

Pseudoelementy

W czasie pisania tego artyku┼éu tylko przegl─ůdarki oparte na silniku Webkit/Blink obs┼éugiwa┼éy pseudoelementy ::before i ::after dla elementu progress. Poprzez samo spojrzenie na pasek post─Öpu nie ma mo┼╝liwo┼Ťci odczytania jego warto┼Ťci. Mo┼╝emy rozwi─ůza─ç ten problem wy┼Ťwietlaj─ůc jego warto┼Ť─ç na samym ko┼äcu paska za pomoc─ů pseudoelement├│w ::before i ::after.

progress[value]::-webkit-progress-value::before {
  content: '80%';
  position: absolute;
  right: 0;
  top: -125%;
}
Pseudoelement w akcji

Niestety content: attr(value) nie dzia┼éa na elemencie progress. Zadzia┼éa jednak, je┼Ťli jawnie okre┼Ťlisz tekst wewn─ůtrz atrybutu. Nie uda┼éo mi si─Ö ustali─ç, jaka jest tego przyczyna. Dzia┼éa to tylko w przegl─ůdarkach opartych na silniku Webkit/Blink, wi─Öc nie ma powodu do osadzania zawarto┼Ťci w pseudoelementach, przynajmniej na razie.

Za pomoc─ů pseudoelementu ::after mo┼╝emy utworzy─ç ┼éadne zako┼äczenie paska post─Öpu. Przedstawione metody s─ů w stanie eksperymentalnym i nie s─ů zalecane je┼Ťli zale┼╝y Ci na zgodno┼Ťci z wieloma przegl─ůdarkami.

progress[value]::-webkit-progress-value::after {
  content: '';
  width: 6px;
  height: 6px;
  position: absolute;
  border-radius: 100%;
  right: 7px;
  top: 7px;
  background-color: white;
}

Firefox

Podobnie jak Webkit/Blink, Firefox tak┼╝e korzysta z w┼éasno┼Ťci -moz-appearence: progressbar do wy┼Ťwietlania elementu progress.

Zrzut ekranu z Firebuga

Korzystaj─ůc z w┼éasno┼Ťci appearence: none pozb─Ödziemy si─Ö domy┼Ťlnych wyt┼éocze┼ä i skos├│w. Niestety, takie dzia┼éanie zostawia w Firefoksie delikatne obramowanie. Mo┼╝emy si─Ö go pozby─ç za pomoc─ů ustawienia border: none. Rozwi─ůzuje to tak┼╝e problem z obramowaniem w Operze 12.

progress[value] {
  /* Nadpisywanie domy┼Ťlnych styl├│w */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  
  /* Usuwanie domy┼Ťlnego obramowania w Firefoxie */
  border: none;
  
  /* Rozmiar */
  width: 250px;
  height: 20px;
}
Delikatne obramowanie w Firefoksie i Operze

Firefox ma tylko jedn─ů pseudoklas─Ö (-moz-progress-bar), za pomoc─ů kt├│rej mo┼╝e odwo┼éywa─ç si─Ö do paska post─Öpu. Oznacza to, ┼╝e nie nadamy styl├│w kontenerowi w tej przegl─ůdarce.

progress[value]::-moz-progress-bar { 
  background-image:
    -moz-linear-gradient(
      135deg, 
      transparent 33%, 
      rgba(0, 0, 0, 0.1) 33%, 
      rgba(0, 0, 0, 0.1) 66%, 
      transparent 66% 
    ),
    -moz-linear-gradient(
      top, 
      rgba(255, 255, 255, 0.25), 
      rgba(0, 0, 0, 0.25)
    ),
    -moz-linear-gradient(
      left, 
      #09c, 
      #f44
    );

  border-radius: 2px; 
  background-size: 35px 20px, 100% 100%, 100% 100%; 
}

Firefox nie obsługuje pseudoklas ::before i ::after dla elementu progress, a także nie pozwala na użycie keyframe animation w pasku postępu.

Internet Explorer

Internet explorer w wersji 10+ standardowo obs┼éuguje pasek post─Öpu, ale tylko cz─Ö┼Ťciowo. Pozwala na zmian─Ö koloru warto┼Ťci paska. Internet Explorer implementuje warto┼Ť─ç paska post─Öpu jako atrybut color, a nie background-color.

progress[value]  {
  /* Nadpisywanie domy┼Ťlnych styl├│w */
     -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  /* Usuwanie domy┼Ťlnego obramowania w Firefoksie */
  border: none;

  /* Rozmiar */
  width: 250px;
  height: 20px;

  /* IE10 */
  color: blue; 
}

Co ze starymi przegl─ůdarkami

Element progress jest standardowo obs┼éugiwany przez przegl─ůdarki Firefox 16+, Opera 11+, Chrome oraz Safari 6+. IE10+ obs┼éuguje go cz─Ö┼Ťciowo. Je┼╝eli chcesz zapewni─ç obs┼éug─Ö dla starszych przegl─ůdarek, masz dwa wyj┼Ťcia.

Wypełniacz elementu progress Lea Verou

┼Üwietny wype┼éniacz Lea Vearou sprawia, ┼╝e element progress jest prawie w pe┼éni obs┼éugiwany przez przegl─ůdarki Firefox 2.5-15, Opera 10.5-10.63 oraz IE9-10. Cz─Ö┼Ťciowa obs┼éuga zapewniona jest tak┼╝e w IE8. Wystarczy doda─ç plik progress-polyfill.js do pliku HTML, a tak┼╝e selektory CSS, kt├│rych u┼╝ywa skrypt. Je┼╝eli chcesz dowiedzie─ç si─Ö wi─Öcej na temat jego u┼╝ywania, sprawd┼║ kod ┼║r├│d┼éowy na stronie projektu.

Pomocniczy HTML

Jest to m├│j ulubiony spos├│b. Skorzystamy z powszechnie znanej techniki, kt├│ra jest wykorzystywana przy stosowaniu element├│w audio i video.

<progress max="100" value="80">
    <div class="progress-bar">
        <span style="width: 80%;">Progress: 80%</span>
    </div>
</progress>

Zasymulujemy wygl─ůd paska post─Öpu za pomoc─ů znacznik├│w div i span wewn─ůtrz znacznika progress. Nowsze przegl─ůdarki ignoruj─ů zawarto┼Ť─ç wewn─ůtrz znacznika progress. Starsze przegl─ůdarki, kt├│re nie rozpoznaj─ů elemementu progress zignoruj─ů go i wy┼Ťwietl─ů wewn─Ötrzny kod.

.progress-bar {
  background-color: whiteSmoke;
  border-radius: 2px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;

  width: 250px;
  height: 20px;
  
  position: relative;
  display: block;
}
  
.progress-bar > span {
  background-color: blue;
  border-radius: 2px;

  display: block;
  text-indent: -9999px;
}

Obie techniki s─ů cz─Östo stosowane i na dodatek bezpieczne nawet na stronach produkcyjnych. Maj─ůc styl do jednego paska, kolejne mo┼╝emy formatowa─ç korzystaj─ůc z klas.

Autor: w artykule wykorzystano tłumaczenie artykułu Chrisa Coyiera

Źródło: http://css-tricks.com/html5-progress-element/

Tłumaczenie: Piotr Janczukowicz