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:
|
1 |
<progress value="23" max="100"></progress> |
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:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> Downloading progress: <progress value="22" max="100"> </progress> </body> </html> |
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ő:
|
1 2 3 4 5 6 7 8 |
progress[value] { /* Reset */ -webkit-appearance: none; appearance: none; /* méretek */ width: 250px; height: 20px; } |
A pseudo class-ok pedig a következők:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
progress[value]::-webkit-progress-bar { background-color: #eee; border-radius: 2px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; } 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%; } |
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ő:
|
1 2 3 4 5 6 7 8 9 10 |
progress[value] { /* Reset */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Méretek */ width: 250px; height: 20px; } |
A pseudo class-ok pedig a következők:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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%; } |
3. Internet Explorer 10+
Ismét vicces, de itt csak a színt állíthatjuk. Semmi mást nem támogat. Példa:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
progress[value] { /* Reset */ -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; /* Méretek */ width: 250px; height: 20px; /* For IE10 */ color: blue; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!doctype html> <html> <head> <title>HTML5 Progress Bar Demo</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/modernizr.js" type="text/javascript"></script> <script> $(document).ready(function() { if(!Modernizr.meter){ alert('Sorry your brower does not support HTML5 progress bar'); } else { var progressbar = $('#progressbar'), max = progressbar.attr('max'), time = (1000/max)*5, value = progressbar.val(); var loading = function() { value += 1; var val = progressbar.val(value); $('.progress-value').html(value + '%'); if (value == max) { clearInterval(animate); $('.progress-value').html(max + '%'); } }; var animate = setInterval(function() { loading(); }, time); }; }); </script> </head> <body> <div class="demo-wrapper html5-progress-bar"> <div class="progress-bar-wrapper"> <progress id="progressbar" value="0" max="100"></progress> <span class="progress-value">0%</span> </div> </div> </body> </html> |
A példát itt megtekintheted. Itt pedig le tudod tölteni.
