Generate pure-CSS spinners and loaders — pick a style, size, color, and speed, then copy the HTML and keyframes
Style
Settings
Preview
HTML + CSS output
<div class="loader-R759bsnpfr5tllb"></div>
<style>
.loader-R759bsnpfr5tllb {
width: 48px;
height: 48px;
border: 6px solid #6366f133;
border-top-color: #6366f1;
border-radius: 50%;
animation: loader-R759bsnpfr5tllb-spin 1s linear infinite;
}
@keyframes loader-R759bsnpfr5tllb-spin {
to { transform: rotate(360deg); }
}
</style>