Powered byBlog Widgetand shared by JUNIAWAN89

Membuat Progress Bar dengan JQuery

Membuat progress bar dengan JQuery

Deklarasi file :
<html>
<head>
<title>Contoh Progressbar</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>              
<link rel="stylesheet" type="text/css" href="js/development-bundle/themes/base/jquery.ui.all.css" />

Berikut Kode JS nya :
<script type="text/javascript">
$(document).ready(function() {
  var total = Math.floor(40 + Math.random()*40);
  var akumulasi = 0;
$("#total").text(total);
window.setTimeout ("cek()", 0); });

function cek() {
if ( typeof akumulasi == "undefined" ) {
  // Kalau belum terdefinisi
  akumulasi = 0;
  $("#kemajuan").progressbar({
  value: 0
  });
}

var total = $("#total").text();
if (akumulasi <= total) {
  akumulasi = akumulasi + 1;
  $("#kemajuan").progressbar({
  value: Math.floor(akumulasi/total * 100)
  });
  window.setTimeout ("cek()", 1000);
  }
}
</script>
</head>

Berikut HTML nya :
<body>
<div id="info">Proses ini memakan waktu <span id="total"></span> detik.
Persentase pemrosesan hingga saat ini:</div> <div id="kemajuan"></div>
</body>
</html>

Jika dijalankan hasilnya sebagai berikut :





Download Kode disini




Previous
Next Post »

Pengunjung yang baik selalu memberikan masukan / komentar.... ConversionConversion EmoticonEmoticon

Popular