JQuery – Make a Progress Bar Website

on

progressbar
how to make a Progress bar Website?
to the point,
step by stepnya:
1. make a file , name “index.php”
script:

<html>
<head>
<title>Memmbuat Progressbar</title>
</head>
<body>
ke menu utama<a href=”progress.php”>Klick Disini</a>
</body>
</html>


2. make a file, name “progress.php”
script:

<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>Memmbuat Progressbar</title>
<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css&#8221; />
<script src=”http://code.jquery.com/jquery-1.9.1.js”></script&gt;
<script src=”http://code.jquery.com/ui/1.10.2/jquery-ui.js”></script&gt;
<link rel=”stylesheet” href=”/resources/demos/style.css” />
<style>
.progress-label {
float: left;
margin-left: 50%;
margin-top: 5px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function() {
var progressbar = $( “#progressbar” ),
progressLabel = $( “.progress-label” );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( “value” ) + “%” );
},
complete: function() {
document.location=”menu.php”;
}
});
function progress() {
var val = progressbar.progressbar( “value” ) || 0;
progressbar.progressbar( “value”, val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<div id=”progressbar”><div>Loading…</div></div>
</body>
</html>

3. make a file, name “menu.php”
script:

<html>
<head>
<title>Memmbuat Progressbar</title>
</head>
<body>
Tampilan Menu
</body>
</html>

very simple posting🙂

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s