HTML5 és CSS3 programozás

A HTML5 progress element használata

by · Published · Updated

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>

 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ő:

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%; 
}

 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:

progress[value]  {
  /* Reset  */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  /* Méretek */
  width: 250px;
  height: 20px;
  /* For IE10 */
  color: blue; 
}

 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:

<!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.

 

Tags:

You may also like...