Customize
Color
Size
40px
Speed
1.0s
Thickness
3px
Generate pure CSS loading animations — spinner, dots, bars, pulse, ring, wave, bounce and orbit. Customize size, color and speed. No JavaScript or images needed — copy the CSS instantly.
CSS loading animations are built from @keyframes combined with the animation property. The spinner uses a partially-transparent border with a colored top edge and animation: spin 1s linear infinite. Dot loaders stagger the same animation across multiple elements using animation-delay. Bar loaders use transform: scaleY() with staggered delays to create a wave effect. For performance, always animate transform and opacity rather than layout properties — they run on the GPU compositor thread and don't cause repaints. CSS loaders add zero JavaScript weight to a page and are ideal for inline use in buttons, skeletons, or full-page loading states.