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-Rsl5fiv5ur5tllb"></div>
<style>
.loader-Rsl5fiv5ur5tllb {
width: 48px;
height: 48px;
border: 6px solid #6366f133;
border-top-color: #6366f1;
border-radius: 50%;
animation: loader-Rsl5fiv5ur5tllb-spin 1s linear infinite;
}
@keyframes loader-Rsl5fiv5ur5tllb-spin {
to { transform: rotate(360deg); }
}
</style>