<html>
    <head>
    <script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
   <script type="text/javascript">
$(document).ready(function() {

	$().ajaxStart(function() {
		$('#loading').show();
                $('#myForm').hide();
		$('#result').hide();
	}).ajaxStop(function() {
		$('#loading').hide();
                $('#myForm').hide();
		$('#result').fadeIn('slow');
	});
        
	$('#myForm').submit(function() {
		$.ajax({
			type: 'POST',
			url: $(this).attr('action'),
			data: $(this).serialize(),
			success: function(data) {
				$('#result').html(data);
			}
		})
		return false;
	});
})
</script>
<style type="text/css">
body, table, input, select, textarea { font: 11px/20px Verdana, sans-serif; }
h4 { font-size: 18px; }
input { padding: 3px; border: 1px solid #999;}
td { padding: 5px; }
#result { background-color:#DBE7F5; border: 1px solid #215800; padding: 10px; max-width: 100%}
#loading{ position: absolute; max-width: 100% ;margin-top: 20%; left:45%}
</style>

    </head>
    <body>
        <div id="loading" style="display:none;">
            <img src="images/ajax-loader.gif"/></div>
        <div id="result" style="display:none;"></div>
        <form id="myForm" method="post" action="absensi.php?form=generateabsensi">
	<table>
	<tr>
            <td>
                <label style="font-size: 16px; font-weight: bold">Generate Dari Mesin Absen</label>
            </td>
            <td>
                :
            </td>
            <td>
                <input type="submit" value="Proses Sekarang" id="title"/>
            </td>
	</tr>
	</table>
            <br>
         <table border="1" width="800px">
	<tr>
            <td>Keterangan </td>
            <td>Status </td>
            <td>Waktu </td>
	</tr>
        <tr>
            <td>Ambil Data Dari Mesin Absen </td>
            <td><label>Proses</label></td>
            <td><label>0:0:0</label></td>
	</tr>
        <tr>
            <td>Proses Data Absensi Staff </td>
            <td><label>Proses</label></td>
            <td><label>0:0:0</label></td>
	</tr>
        <tr>
            <td>Proses Data Absensi Non Staff </td>
            <td><label>Proses</label></td>
            <td><label>0:0:0</label></td>
	</tr>
	</table>
</form>

    </body>

</html>