Dynamic Progress Bar in HTML, JS & PHP with source code

Clear Guide to Build Reviewing Progress Bar:

This bar will be viewed by an average rating of stars, with the number of stars and a progress tracker for each star rating; thus, it serves for review pages or dashboards.

Review Progress Bar:

Average Ratings: The average ratings display the average ratings of stars and numbers.
Rating Progress Bar: The number of users who rated the review with 1, 2, 3, 4, or 5.
Good Looking: Bright and modern design, so all clean and simple.

Step 1: Building HTML Structure

We will now create the skeleton of the HTML, which is a section for the average rating and a space for the progress bars.

HTML Code:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Review Rating UI</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css”>
</head>
<body>
<h1>Review Rating System</h1>
<div class=”average-class”>
<span class=”star-container” id=”average-stars”></span>
<span class=”average-rating” id=”average-rating”>Calculating…</span>
</div>
<div class=”progress-container” id=”progress-container”></div>
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
</body>
</html>

Step2: Styling Progress Bar

So obviously, it should look good. Use CSS to style the stars, the progress bars, and the text.

CSS CODE

Step 3: Dynamic Data Adding by jQuery

With js and jQuery, we can easily fetch the data and update the progress bar in real-time.

js code:

// Calculate the average rating
let sumRatings = 0;
for (let rating = 1; rating <= 5; rating++) {
const count = data[rating] || 0;
sumRatings += count * rating;
}
const averageRating = (sumRatings / total).toFixed(2);

// Display the average rating
$(‘#average-rating’).text(`${averageRating} Out of 5`);

// Render average stars
const fullStars = Math.floor(averageRating);
const halfStar = (averageRating % 1) >= 0.5 ? 1 : 0;
const emptyStars = 5 – fullStars – halfStar;

let starsHTML = ”;
for (let i = 0; i < fullStars; i++) starsHTML += ‘<i class=”fas fa-star”></i>’;
if (halfStar) starsHTML += ‘<i class=”fas fa-star-half-alt”></i>’;
for (let i = 0; i < emptyStars; i++) starsHTML += ‘<i class=”far fa-star”></i>’;

$(‘#average-stars’).html(starsHTML);

// Generate progress bars
for (let rating = 5; rating >= 1; rating–) {
const count = data[rating] || 0;
const percentage = ((count / total) * 100).toFixed(2);

$(‘#progress-container’).append(`
<div class=”progress-row”>
<span>${rating} Stars</span>
<div class=”progress-bar-review”>
<div class=”progress-review” data-rating=”${rating}” style=”width: ${percentage}%;”>
${percentage}%
</div>
</div>
<div class=”count”>(${count})</div>
</div>
`);
}
},
error: function (xhr, status, error) {
console.error(‘Error fetching data:’, error);
}
});
});
</script>

Step 4: Access the Database with PHP

Fetch ratings from the database and post via JSON into the PHP file.

php code:

<?php
$conn = mysqli_connect(‘localhost’,’root’,”,’yourdatabasename’);

if ($conn->connect_error) {
die(“Connection failed: ” . $conn->connect_error);
}
$sql = “SELECT columnname, COUNT(*) as count FROM review_table GROUP BY columnname”;
$result = $conn->query($sql);

$data = [];
$total = 0;
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$data[$row[‘columnname’]] = $row[‘count’];
$total += $row[‘count’];
}
}
$response = [
‘data’ => $data,
‘total’ => $total
];
header(‘Content-Type: application/json’);
echo json_encode($response);
$conn->close();
?>

Preview Progress Bar

What is so Unique About This Progress Bar?

All these things are done in real time from the server.
Simple and clean design. Therefore, easy to understand at a glance.
Different ratings are shown with different colors for uniqueness.

Final Words

This is what you would get after just a little coding in PHP, JavaScript, and CSS – a very elegant bar of review progress that is tagged along with the site, as it clearly and nicely displays customer feedback. Try customizing it for your site.
Download File

php