Spinner
A classic rotating spinner that communicates ongoing processing. Use it for form submissions, data fetches, or any asynchronous operation that needs a visual loading indicator.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
spinnerloaderrotatingloading
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A classic rotating spinner for indicating loading or processing states.
CSS
css
.spinner {
width: 48px;
height: 48px;
border: 4px solid rgba(255,255,255,0.2);
border-top-color: #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }HTML
html
<div class="spinner"></div>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
.spinner {
width: 48px;
height: 48px;
border: 4px solid rgba(255,255,255,0.2);
border-top-color: #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>