Twitter Bootstrap Progress Bar example using jQuery and PHP
So you'd like to see Twitter Bootstrap Progress Bar actually work. Not too many examples out there are there. For this, after you've downloaded Twitter Bootstrap, you will need 3 more files:
So let's start with index.html. Get the basic template from http://getbootstrap.com/getting-started/
and make the following additions (in red). This file:
index.html
Now for the posthandler.php
This script:
Live Demo Download- Your demo file, index.html
- Your post handler, posthandler.php
- Your empty data file, datafile.dat which is writeable
So let's start with index.html. Get the basic template from http://getbootstrap.com/getting-started/
and make the following additions (in red). This file:
- Creates a progress bar
- Kicks off the post handler using the submit button
- Checks the value contained in the data file
- Uses the data gathered to increase the width of the progress bar
Download :
bootstrap.js (js file)
bootstrap.css(css files)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
body
{
padding-top:2em;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="container">
<div class="col-md-12">
<form role="form">
<button type="submit" class="btn btn-default">Submit</button>
</form><br />
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width:0%">
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
(function()
{
$('form').submit(function()
{
$.post('posthandler.php', function(data1)
{
console.log(data1)
});
var refreshId = setInterval(function()
{
$.get('datafile.dat', function(data2)
{
$('.progress-bar').css('width',data2+'%');
if(data2 >= 100)
{
console.log('finished');
$('.progress').removeClass('active');
$('.progress').removeClass('progress-striped');
$('.progress-bar').text('Complete');
clearInterval(refreshId);
}
});
}, 100);
return false;
});
})();
</script>
</body>
</html>
Now for the posthandler.php
This script:
- Clears the data file
- Every so often, updates the data file contents
posthandler.php
<?php
file_put_contents('datafile.dat', '');
for($i = 1; $i <= 100; $i++)
{
usleep(200000);
file_put_contents('datafile.dat', $i);
}
?>
1 comments
Nice blog here! Also your site loads up fast! What web host are you using? Can I get your affiliate link to your host? I wish my website loaded up as fast as yours lol
ReplyDelete