Content is loading…
Share
Generate pure-CSS loading spinners and copy the HTML + CSS.
<div class="loader"></div>
<style>
.loader {
width: 48px;
height: 48px;
border: 6px solid #6366f133;
border-top-color: #6366f1;
border-radius: 50%;
animation: loader-spin 1s linear infinite;
}
@keyframes loader-spin {
to { transform: rotate(360deg); }
}
</style>Create pure-CSS loading spinners and animations with no images or JavaScript. Choose from spinner, dual-ring, dots, bars and pulse styles, tweak size, color and speed, and copy the ready-to-paste HTML + CSS. Perfect for lightweight loading indicators. Runs entirely in your browser.
Share this tool
Visually create CSS box shadows with live preview and one-click copy.
Convert colors between HEX, RGB, and HSL formats.
Load and compare multiple URLs side by side in resizable iframes.