Pasek postępu w HTML5

Latem pisałem o nowych funkcjach formularzy w HTML5. Minęła jesień, zima też, mamy wiosnę, przeglądarki zmieniły numerki i zaczyna się robić ciekawie jeżeli chodzi o wykorzystanie HTML5. Dzisiaj na talarzu kilka słów o kolejnym „podelemencie” formularzy –  pasku postępu (progress). Na dzień dzisiejszy działa on u mnie w Chrome 10.0.648.204 i Opera 11.01. Firefox 3.6.16 i Safari 5.0.4 leża…

Kilka prostych przykładów progress w HTML5

Pasek postępu służy do reprezentacji procesu wykonywania zadania – brzmi groźnie, ale chyba każdy wie o co chodzi.  Wykonanie zadanie określają 2 atrybuty elementu progress:

• value – aktualny poziom wykonania zadania (typ float);
• max – maksymalna wartość określająca wykonanie zadania (typ float).

Obydwa atrybuty są opcjonalne, ale nie określenie wartości maksymalnej, według mnie całkowicie przeczy sensowi wykorzystania paska.

<progress value="33" max="100">33%</progress>

Nie określenie value, jest już ciekawszym przypadkiem. W Chrome niezdefiniowanie wartości zobrazowane jest jako animacja kojarząca się z nawiązywaniem połączenia.

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

Wstawienie wartości równej zero, wyłacza ten efekt.

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

Przykładowy „interaktywny” progress

Poniżej zamieszczam przykład obrazujący wykorzystanie progress oraz link do małej demonstracji.

<div>
 <p>Postęp:
  <progress id="progress_bar" max="100" title="0"><span>0</span>%</progress>
 </p>
 <script type="text/javascript">
  var progressBar = document.getElementById('progress_bar');
  function update_progress(newValue){
    progressBar.value = newValue;
    progressBar.title = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
 </script>
 <p>
  <a onclick="update_progress(0)">0</a>,
  <a onclick="update_progress(10)">10</a>,
  <a onclick="update_progress(30)">30</a>,
  <a onclick="update_progress(60)">60</a>,
  <a onclick="update_progress(100)">100</a>
 </p>
</div>

Przykładowe paski postępu w HTML5