Eclipse
A pure CSS eclipse loader that animates an inset box-shadow across a circle from one side to the other, creating a smooth solar-eclipse sweeping effect.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
spinnereclipseloaderbox-shadowinsetsweep
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A CSS spinner that uses an animated inset box-shadow to sweep across a circle like a solar eclipse.
CSS
css
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
.eclipse:before {
display: block;
content: '';
height: 50px;
width: 50px;
animation: eclipse 1s infinite ease;
background-color: #0f0f0f;
border-radius: 100%;
}
@keyframes eclipse {
from { box-shadow: inset 50px 0 0 0 #6366f1; }
to { box-shadow: inset calc(50px * -1) 0 0 0 #6366f1; }
}HTML
html
<div class="eclipse"></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; }
.eclipse:before {
display: block;
content: '';
height: 50px;
width: 50px;
animation: eclipse 1s infinite ease;
background-color: #0f0f0f;
border-radius: 100%;
}
@keyframes eclipse {
from { box-shadow: inset 50px 0 0 0 #6366f1; }
to { box-shadow: inset calc(50px * -1) 0 0 0 #6366f1; }
}
</style>
</head>
<body>
<div class="eclipse"></div>
</body>
</html>