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:
<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:
<!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ő:
progress[value] {
/* Reset */
-webkit-appearance: none;
appearance: none;
/* méretek */
width: 250px;
height: 20px;
}
A pseudo class-ok pedig a következők:
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ő:
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:
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:
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:
<!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.