CSS Loader Generator
Pick a loading spinner, customize it, copy the CSS.
Ad
Ad
Frequently Asked Questions
How do I change the speed of a CSS loader? +
Adjust the animation-duration property in the CSS. A smaller value like 0.5s makes it faster, while a larger value like 2s makes it slower. You can also use the speed slider in this tool to preview different speeds before copying the code.
Are CSS-only loaders better than GIF or SVG loaders? +
CSS loaders are resolution-independent, easy to customize with code, and add zero HTTP requests. GIFs are pixelated on high-DPI screens and can't be easily recolored. SVG loaders are also resolution-independent but require markup. For most cases, CSS loaders are the lightest and most flexible option.
How do I center a CSS loader on the page? +
Use flexbox on the parent container: display: flex; justify-content: center; align-items: center; height: 100vh. Alternatively, use position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) on the loader element for a viewport-centered overlay.
Ad