Generate pure CSS loading spinners and animations — spinner, dots, pulse, bar, ring, wave, and more. Live preview and copy-ready HTML + CSS. No data leaves your browser.
More free utilities you might find useful
Quick answers to common questions
No. Output is plain HTML markup plus CSS keyframe animations — no JS runtime required.
Yes. Adjust primary/secondary colors, size, speed, and thickness (where applicable) before copying.
Spinner, dots, pulse, bar, ring, square, wave, ripple, dual ring, and ellipsis.
No. Generation runs entirely in your browser.
Your data is processed entirely in your browser. Nothing is sent to any server.
Loader style
HTML + CSS
<div class="tr-loader-spinner" aria-hidden="true"></div>
<style>
.tr-loader-spinner {
width: 48px; height: 48px;
border: 4px solid #e2e8f0;
border-top-color: #16a34a;
border-radius: 50%;
animation: tr-spin 1s linear infinite;
}
@keyframes tr-spin { to { transform: rotate(360deg); } }
</style>