Loading effect…
Loading preview…
loaders · css · free
Sample: framework css + free + live — pure CSS spinner, no React component logic.
.zn-dot-loader {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.zn-dot-loader span {
width: 0.55rem;
height: 0.55rem;
border-radius: 999px;
background: #18181b;
animation: zn-dot-bounce 0.9s ease-in-out infinite;
}
.zn-dot-loader span:nth-child(2) {
animation-delay: 0.12s;
}
.zn-dot-loader span:nth-child(3) {
animation-delay: 0.24s;Sample case: framework: css + previewMode: live + pricing: free
Copy the CSS and markup — no React hook required.
<link rel="stylesheet" href="./dot-loader.css" />
<div class="zn-dot-loader" role="status" aria-label="Loading">
<span></span>
<span></span>
<span></span>
</div>