A HTML5 progress element használata

A HTML5-ben debütált a progress element, amely ahogy a neve is mutatja egy folyamatot képes vizuálisan is megjeleníteni a számunkra. Eddig a böngészők nem, vagy csak részben támogatták, de a legutóbbi tesztjeink alapján immár felkerült a palettára.

A következőkben egy-két példát szeretnék mutatni nektek a használatára, valamint a stilizálási lehetőségeinkre.

Használata:

Ahogy látjátok, definiálhatunk egy értéket és egy maximumot is. Például remekül használható egy form esetén, ahol le tudjuk definiálni, hogy egy bizonyos kitöltöttség milyen értéket képvisel a maximumhoz képest.

Böngésző támogatottság: Chrome 8+, Firefox 16+, IE 10+, Opera 11+, Safari 6+

Egy rendkívül egyszerű példa a használatára:

 Itt meg tudod tekinteni.

No hát a móka része innen kezdődik, mert a böngészők mind máshogy támogatják és saját pseudo class-okat használnak a stíluselemekhez.

No nézzük is:

1. Chrome/Safari/Opera

A definíció itt a következő:

A pseudo class-ok pedig a következők:

 Itt a példa, ha megnézed, csak a fent említett böngészőkben működik.

2. Firefox

A definíció a következő:

A pseudo class-ok pedig a következők:

 Itt tudod kipróbálni.

3. Internet Explorer 10+

Ismét vicces, de itt csak a színt állíthatjuk. Semmi mást nem támogat. Példa:

 Itt tudod kipróbálni

A progress bar animálása

Ezt remekül megtehetjük akár jQuery-vel is. Hiszen ez a legegyszerűbb.

A teljes kód:

 A példát itt megtekintheted. Itt pedig le tudod tölteni.

 

You may also like...