Animated Loading Spinners Gallery in PHP
Create a gallery of 10+ beautiful CSS loading spinner animations served dynamically through PHP.
PHPCSSAnimationSpinners
Overview
Build a dynamic gallery of beautiful CSS loading spinners. PHP generates each spinner card and lets users copy the CSS code.
Spinner Definitions (spinners.php)
php
<?php
function getSpinners(): array {
return [
[
'name' => 'Pulse Ring',
'html' => '<div class="spinner pulse-ring"></div>',
'css' => '.pulse-ring {
width: 60px; height: 60px; border-radius: 50%;
border: 4px solid #6c63ff;
animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
0% { transform: scale(0.8); opacity: 0.5; }
50% { transform: scale(1); opacity: 1; }
100% { transform: scale(0.8); opacity: 0.5; }
}'
],
[
'name' => 'Bouncing Dots',
'html' => '<div class="spinner bouncing-dots"><span></span><span></span><span></span></div>',
'css' => '.bouncing-dots { display: flex; gap: 8px; }
.bouncing-dots span {
width: 14px; height: 14px; background: #ff6b6b; border-radius: 50%;
animation: bounce 0.6s alternate infinite;
}
.bouncing-dots span:nth-child(2) { animation-delay: 0.2s; }
.bouncing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { to { transform: translateY(-20px); } }'
],
[
'name' => 'Rotating Square',
'html' => '<div class="spinner rotating-square"></div>',
'css' => '.rotating-square {
width: 40px; height: 40px; background: #00cec9;
animation: rotsq 1.2s ease-in-out infinite;
}
@keyframes rotsq {
0% { transform: rotate(0) scale(1); border-radius: 0; }
50% { transform: rotate(180deg) scale(0.6); border-radius: 50%; }
100% { transform: rotate(360deg) scale(1); border-radius: 0; }
}'
],
];
}
?>Main Page (index.php)
php
<?php require_once 'spinners.php'; $spinners = getSpinners(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loading Spinners Gallery</title>
<style>
<?php foreach ($spinners as $s) echo $s['css'] . "\n"; ?>
</style>
</head>
<body>
<h1>CSS Loading Spinners Gallery</h1>
<div class="grid">
<?php foreach ($spinners as $i => $spinner): ?>
<div class="card">
<div class="preview"><?= $spinner['html'] ?></div>
<h3><?= htmlspecialchars($spinner['name']) ?></h3>
<button onclick="copyCSS(<?= $i ?>)">Copy CSS</button>
<pre id="code-<?= $i ?>"><?= htmlspecialchars($spinner['css']) ?></pre>
</div>
<?php endforeach; ?>
</div>
<script>
function copyCSS(i) {
navigator.clipboard.writeText(document.getElementById('code-' + i).textContent);
}
</script>
</body>
</html>Technologies
- PHP — dynamic spinner rendering - CSS Animations — keyframes, transforms - JavaScript — copy-to-clipboard
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
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
PHPApr 27, 2026
PHP Typing Speed Test
Build an interactive typing speed test that measures WPM and accuracy, with PHP-served random paragraphs.
PHPJavaScriptCSSGame
Read more → Source
Comments (0)
No comments yet. Be the first to comment!