Design an animated loading bar that actually runs, not just a static frame. Choose sweep, stripe or pulse motion, or switch to a determinate percentage bar, then copy the CSS.
Every preview here is a live, running CSS animation, not a static screenshot, so you see exactly what visitors will see.
Sweep, stripes and pulse cover the most common indeterminate loading patterns.
Switch to a percentage bar with an optional live label for real progress tracking.
Style the bar with one flat color or a smooth two-color gradient.
Style the bar, pick a motion, then copy the code.
Loading bars fall into two broad categories, and picking the right one matters for how trustworthy an interface feels. A determinate bar tells the truth about progress: it fills from 0% to 100% based on real data, such as bytes uploaded or steps completed, and should only be used when that real number is actually known. An indeterminate bar makes no promise about how long something will take; it simply needs to communicate that the system is working, which is why it loops continuously instead of reaching a fixed end state. Choosing between a sweeping highlight, animated stripes or a gentle pulse is mostly about tone: sweeps read as active and mechanical, stripes suggest movement like a conveyor belt, and a pulse feels calmer and more ambient.
A short filled segment slides from one edge to the other on a loop, similar to bars used in many design systems for network requests.
A repeating diagonal gradient shifts its background position continuously, creating a moving stripe effect across a fully filled bar.
The filled bar's opacity oscillates smoothly, a subtle option that works well for background or secondary loading states.
As soon as you can calculate real progress, such as a file upload percentage, switch to determinate mode so users see accurate, trustworthy feedback.
A determinate bar shows an exact percentage of progress toward completion. An indeterminate bar animates continuously to show that work is happening, without implying how long it will take.
Sweep mimics common Material-style loading bars, stripes suit file-transfer or upload style progress, and pulse works well for a subtle background loading indicator.
Yes. Switch the fill style to gradient and choose two colors. Both determinate and indeterminate bars support a gradient fill.
Yes. The copied code includes the exact keyframes block for whichever animation type is active, or a static percentage width for determinate mode.
Yes. It is completely free, requires no account, and the preview and generated CSS are built entirely in your browser.
Cover every loading state in your interface with these free online CSS tools.