Showing posts with label progress bar. Show all posts
Showing posts with label progress bar. Show all posts

Wednesday 9 April 2014

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:

  • 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

<!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

<?php
file_put_contents('datafile.dat', '');
for($i = 1; $i <= 100; $i++)
{
usleep(200000);
file_put_contents('datafile.dat', $i);
}
?>

Enjoy!

Wednesday 11 December 2013

Dynamic progress bar for Twitter Bootstrap using PHP

Twitter Bootstrap offers some very useful progress bars. See http://getbootstrap.com/components/#progress
They are based on percentages, so you need to get the length of the shaded bar as a percentage of the whole bar for them to be accurate.

Below is a small example of how to do this with PHP.

<?php
$currentVal = 10;
$maxVal = 20;
$percentageVal = ($currentVal/$maxVal)*100;
?>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="<?php echo $currentVal ?>" aria-valuemin="0" aria-valuemax="<?php echo $maxVal ?>"  style="width:<?php echo $percentageVal ?>%;">
    <span class="sr-only"><?php echo $percentageVal ?> Complete</span>
  </div>
</div>