<progress>tagını kullanmak yeterli.
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML 5 progressbar</title>
</head>
<body>
<progress id="progressbar" value="55" max="100"></progress>
</body>
</html>
şimdi ortalığı biraz hareketledirelim.butona bastığımız zaman progressbarda ilerleme olsun.
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../js/jquery-1.js" type="text/javascript"></script>
<title>HTML 5 progressbar</title>
</head>
<script type="text/javascript">
function arttir() {
var bar = document.getElementById("progressbar");
bar.value += 5;
};
</script>
<body>
<progress id="progressbar" value="5" max="100"></progress>
<input type="button" onClick="arttir()" />
</body>
</html>
olayı tamamen dinamik hale getirelim ve herşey kendiliğinden olsun.örneğin 3 saniye aralıklarla progressbar ilerlesin.
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../js/jquery-1.js" type="text/javascript"></script>
<title>HTML 5 progressbar</title>
</head>
<script type="text/javascript">
window.onload = arttir();
function arttir() {
var bar = document.getElementById("progressbar");
setInterval(arttir, 3000);
bar.value += 5;
};
</script>
<body>
<progress id="progressbar" value="5" max="100"></progress>
</body>
</html>
Hiç yorum yok:
Yorum Gönder