Whirl
A pure CSS whirl spinner where a single ball simultaneously scales, rotates over 2000 degrees, and arcs vertically — all in one seamless infinite loop.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
spinnerwhirlloaderrotatescale
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A spinner where a single ball scales up, whirls through 2000 degrees of rotation, and arcs up and back.
CSS
css
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
:root { --primary: #6366f1; }
.whirl {
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 80px;
width: 80px;
}
.whirl:before {
animation: whirl 2s infinite linear;
background-color: var(--primary);
border-radius: 100%;
content: '';
height: 30px;
width: 30px;
}
@keyframes whirl {
0% { transform: scale(0) rotate(-45deg) translateY(0); }
50% { transform: scale(1.25) rotate(960deg) translateY(100%); }
100% { transform: scale(0) rotate(2000deg) translateY(0); }
}HTML
html
<div class="whirl"></div>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
:root { --primary: #6366f1; }
.whirl {
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 80px;
width: 80px;
}
.whirl:before {
animation: whirl 2s infinite linear;
background-color: var(--primary);
border-radius: 100%;
content: '';
height: 30px;
width: 30px;
}
@keyframes whirl {
0% { transform: scale(0) rotate(-45deg) translateY(0); }
50% { transform: scale(1.25) rotate(960deg) translateY(100%); }
100% { transform: scale(0) rotate(2000deg) translateY(0); }
}
</style>
</head>
<body>
<div class="whirl"></div>
</body>
</html>