site logo

Element progress

Grafický element progress zobrazuje poměr skutečné a maximální číselné hodnoty jako délku barevného sloupce. Maximální délka je označena rámečkem, nebo šedým pozadím prvku. Je vhodný pro zobrazení výsledků hlasování, relevance odkazů ve vyhledávači, nebo stupně vyplnění rozsáhlého formuláře ap.

Element progress je podle specifikace HTML5 a je implementován v browserech Chrome, Firefox a Opera. Jde v podstatě o maximálně zjednodušenou variantu elementu meter.

Atributy elementu progress

atributpopis
maxSpecifikuje horní hodnotu rozsahu. Defaultní hodnota je 1. Dolní hodnota je vždy 0 a nelze ji měnit.
valueSpecifikuje aktuální hodnotu, tedy jaká část z hodnoty max je platná. Pokud atribut není uveden, měl by tento stav být indikován.

Když vyhovuje defaultní rozsah 0 až 1, stačí specifikovat atribut value. Chybící atribut value je indikován běžícím sloupcem. Atribut max se hodí pro změnu rozsahu, pokud nevyhovuje defaultní hodnota. Z atributů value a max je vypočtena relativní délka sloupce. Otevírací i zavírací tag elementu progress jsou povinné a text mezi těmito tágy je zobrazen v browserech, které element nepodporují.

Protože element progress má zobrazit aktuální hodnotu, atribut value můžeme nastavit pomocí javascriptu, nebo jej může doplnit serverový skript při generování stránky podle hodnoty z databáze.

Element progress a CSS

elementpoužité css
test 1defaultní styl
test 2 background: #eee;
test 3 class="styleP"
progress pomocí elementu <div>
nastavení hodnoty

Vlevo je živá ukázka prvku progess v několika modifikacích. Ve spodní části je prvek range pomocí kterého můžete měnit velikost sloupce. Browsery IE a Firefox, které neumí prvek range, zobrazí textbox, do kterého můžete zapsat hodnotu klávesnicí. Pak je délka sloupce upravena až poté, když textbox ztratí fokus (kliknete mimo text box).

Porovnání vizuální (ne)shody elementů v různých browserech ukazuje následující screenshot. Je nutné mít na paměti, že element je teprve ve vývoji a jistě dozná ještě mnoha změn. Rozměry elementu se nastavují pomocí vlastností width a height. Nastavení vlastnosti background přepne do klasického vzhledu. Použitý styl ve třetím řádku je výsledkem snahy sjednotit vzhled a je popsán dále. V posledním řádku je simulace elementu progress pomocí prvku div.

screenshot: element progress v různých browserech

Browser Opera neumožní nastavit barvu sloupce, jen při nastavení pozadí se barva pozadí změní. Chrome a Firefox používá ke stylování vendor prefix  pseudotřídy. Všiměte si, jak vlastnost  -progress-bar  je v obou prohlížečích aplikována na jinou část elementu. Snad se někdy programátoři shodnou.


...
<style type="text/css">

progress {height: 16px; width: 120px; margin: 0 auto; padding: 0; display: block;}

.styleP {background: #ccc;}
.styleP::-webkit-progress-bar   {background: #ccc;}
.styleP::-webkit-progress-value {background-color: #0a0; border:1px solid #555;}
.styleP::-moz-progress-bar      {background-color: #0a0; border:1px solid #555;}
</style>
</head>

<body>
...
<progress id="m1" value="0.33">test 1</progress>
...
</body>
</html>

Firefox má možnost nastavit vlastnost  -moz-orient: vertical;  která zajistí vykreslení prvku ve svislé poloze. To by mohlo být výhodné pro tvorbu jednoduchých sloupcových grafů. Ostatní browsery ovšem tuto možnost nemají.

Simulace elementu progress

V posledním řádku živé ukázky najdete oranžový prvek, který se chová obdobně jako progress. Je možné jej zobrazit i ve starších browserech a v IE. Je založen na elementu div, kterému se mění vlastnost border-left. Není potřeba pomocný img. Podrobnější popis tohoto principu najdete na stránce CSS graf.


...
<style type="text/css">
...
.divBar{width: 120px; height: 16px; border: 0; border-left: 39px solid #f80;
        background: #ccc; box-sizing: border-box; -moz-box-sizing: border-box;}
...
</style>

<script type="text/javascript">
function fn(n) {
  ...
  document.getElementById("divBar").style.borderLeft =
   parseInt(n*120) + "px solid #f80";
}
</script>
</head>

<body>
...
<div id="divBar" class="divBar"></div>
...
</body>
</html>

Výpis kódu je zjednodušený kvůli snadnější čitelnosti. Finální kód by měl testovat překročení rozměru prvku div, zobecnění výpočtu měřítka získáním skutečného rozměru prvku a atributu max místo použité konstanty (v kódu červeně). Je možné i zapouzdření do vnějšího div, kterému nastavíte vhodný rámeček.

updated 2011-12-12