I have a php page that takes about 50 seconds to load. During that time I wanted the Bootstrap Progress Bar to run. But this runs only after the page loads.
Here is my code:
<head>
<title>Harvest Expense Report</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="dropdown.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
var progressBar = $('.progress-bar');
var percentVal = 0;
window.setInterval(function(){
percentVal += 2;
progressBar.css("width", percentVal+ '%').attr("aria-valuenow", percentVal+ '%').text(percentVal+ '%');
if (percentVal == 100)
{
var link = document.getElementById('nav-ask');
link.style.display = 'none'
}
}, 500); })
</script>
</head>
<body>
<!--Progress Bar-->
<div class="row">
<div class="col-md-12">
<div class="progress"id="nav-ask">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
0%
</div>
</div>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose a Month
</button>
<div class="dropdown-menu" select name="Dropdown_Month" id="month_dropdown" aria-labelledby="dropdownMenuButton">
<option class="dropdown-item" href="#" value="This">This Month</option>
<option class="dropdown-item" href="#" value="Last">Last Month</option>
</div>
</select>
</div>
<br>
<br>
<br>
<h3><?php echo date('M Y'); ?></h3>
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Expense</th>
</tr>
</thead>
<?php require_once( 'connection.php' );
$result= $api->getUsers();
$users=$result->data;
$range= Harvest_Range::lastMonth();
foreach($users as $key=>$value){
$user_id=$value->get("id");
$first_name=$value->get("first-name");
$last_name=$value->get('last-name');
$result_expenses=$api->getUserExpenses($user_id, $range);
$expenses_data=$result_expenses->data;
$total_cost=0;
foreach($expenses_data as $key=>$value){
if($value->get("is-locked")=="true"){
$total_cost=$total_cost+$value->get("total-cost");
}}
?>
<?php if($total_cost!=0){?>
<tbody>
<tr>
<td> <?php echo $first_name; echo " ".$last_name; ?> </td>
<td> $ <?php echo $total_cost; ?> </td>
</tr>
</tbody>
<?php }}?>
</table>
</body>
</html>
Here is the link to the PHP page. Any ideas on how can I run the progress bar before the page loads? Currently it loads after the page has fully loaded. I would like to run this as soon as a user enters the URL in the browser.
