PHP Animated Progress Dashboard
Build a project progress dashboard with animated circular gauges, bar charts, and real-time stat counters in PHP.
PHPCSSAnimationDashboardCharts
Overview
Create a visually impressive dashboard with animated SVG circular progress bars, animated counters, and bar charts — all data-driven from PHP.
index.php
php
<?php
$stats = [
['label' => 'Tasks Done', 'value' => 78, 'max' => 100, 'color' => '#6c63ff'],
['label' => 'Bugs Fixed', 'value' => 45, 'max' => 60, 'color' => '#ff6b6b'],
['label' => 'Commits', 'value' => 234, 'max' => 300, 'color' => '#48dbfb'],
['label' => 'Tests Pass', 'value' => 92, 'max' => 100, 'color' => '#00ff88'],
];
$bars = [
['label' => 'Mon', 'value' => 12],
['label' => 'Tue', 'value' => 19],
['label' => 'Wed', 'value' => 8],
['label' => 'Thu', 'value' => 15],
['label' => 'Fri', 'value' => 22],
];
$maxBar = max(array_column($bars, 'value'));
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Progress Dashboard</title>
<style>
body { background: #0a0a23; color: #fff; font-family: sans-serif; padding: 2rem; }
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; margin-bottom: 3rem; }
.gauge { text-align: center; }
.gauge svg { width: 150px; height: 150px; }
.gauge circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.gauge .bg { stroke: #1a1a3e; }
.gauge .fg { stroke-dasharray: 440; stroke-dashoffset: 440; animation: gaugeAnim 1.5s ease forwards; }
.gauge .value { font-size: 2rem; font-weight: bold; }
.bar-chart { display: flex; align-items: flex-end; gap: 1.5rem; height: 200px; padding: 1rem; background: #1a1a3e; border-radius: 16px; }
.bar-col { flex: 1; text-align: center; }
.bar { background: linear-gradient(to top, #6c63ff, #48dbfb); border-radius: 8px 8px 0 0; animation: barGrow 1s ease forwards; transform-origin: bottom; }
@keyframes gaugeAnim { to { stroke-dashoffset: var(--offset); } }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
</style>
</head>
<body>
<h1>������ Project Dashboard</h1>
<div class="gauges">
<?php foreach ($stats as $s):
$pct = $s['value'] / $s['max'];
$offset = 440 - (440 * $pct);
?>
<div class="gauge">
<svg viewBox="0 0 160 160">
<circle class="bg" cx="80" cy="80" r="70"/>
<circle class="fg" cx="80" cy="80" r="70" stroke="<?= $s['color'] ?>" style="--offset:<?= $offset ?>" transform="rotate(-90 80 80)"/>
</svg>
<div class="value" style="color:<?= $s['color'] ?>"><?= $s['value'] ?></div>
<div style="opacity:0.6"><?= $s['label'] ?></div>
</div>
<?php endforeach; ?>
</div>
<h2>Weekly Activity</h2>
<div class="bar-chart">
<?php foreach ($bars as $b): ?>
<div class="bar-col">
<div class="bar" style="height:<?= ($b['value']/$maxBar)*100 ?>%"></div>
<div style="margin-top:0.5rem;opacity:0.6"><?= $b['label'] ?></div>
</div>
<?php endforeach; ?>
</div>
</body>
</html>Technologies
- PHP — dynamic data, percentage calculations - CSS — SVG gauge animation, bar chart animation - SVG — circular progress indicators
Related Projects
PHPApr 27, 2026
Analog Clock with PHP & CSS
Build a beautiful real-time analog clock using PHP for time calculation and CSS for the rotating hands and dial.
PHPCSSAnimationClock
Read more → Source
PHPApr 27, 2026
Animated Loading Spinners Gallery in PHP
Create a gallery of 10+ beautiful CSS loading spinner animations served dynamically through PHP.
PHPCSSAnimationSpinners
Read more → Source
PHPApr 27, 2026
PHP Color Palette Generator
Generate beautiful random color palettes with hex codes, RGB values, and one-click copy — all powered by PHP.
PHPCSSColorsDesign Tool
Read more → Source
Comments (0)
No comments yet. Be the first to comment!