dynamic progress bar data
PHP

Make a Dynamic Progress Bar using Php.

Ankit

Welcome back to shortlearner.com
Today we will see how to make a dynamic progress bar,with help the of
bootstrap and php .

dynamic progress bar data
first of all, we should know about where the progress bar is used.
most of the time we see a company or an organisation set there milestone or target and theyshows them on graphical design like progress bar that shows how much percent they done their task.

In this tutorial we make a dynamic progress bar with the help of some bootstrap classes,JavaScript and PHP scripts.

 

here we have a form which takes a value in input field and we also set a milestone or a target that will show how much
percent of target will be completed and show the result in progress bar.

index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style type="text/css">
      
  </style><link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>

<div class="container">

    <?php 
if(isset($_POST['submit']))
{
 $total= "1000";

$count=$_POST['count'];
 $to= ($count/$total)*100;
}
?>
    
 <div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" style="width: <?php echo $to; ?>%"></div>
</div>

<form method="post" action="#">
   <input type="number" name="count">
   <input type="submit" name="submit"> 
</form>
</body>
</html>

we can also represent the results in progress bar,which are fetched from database.
In the below example i am trying to represent percentage of employee that are registered in an organization.
Here i am set a milestone of an organization is 1000 employees, and count the number of registerd employee and show their
percentage in progress bar.

<?php 
$con= mysqli_connect("localhost","root","password","database_shortlearner")
                                    $qry="SELECT COUNT(*) FROM employee;";
                                     $result= mysqli_query($con,$qry);
                                      $row= mysqli_fetch_array($result);
                                      $total=  $row['COUNT(*)'] ;
				 $to= ($total/1000)*100;

            ?>


                    <p style="font-size: 1.7vw">Total:<?php echo $total; ?></p>
                    <div class="container1">
                           <div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" style="width: <?php echo $to; ?>%"></div>
</div>
                          </div>

Also Read
Unable to create a directory a wordpress error
Change password using javascript, php and mysqli.
Password and Confirm Password Validation Using JavaScript
Check Email is Already Registered in Database using Ajax and JavaScript.
How to hide extension of html and php file.?