Cargando
HTML + CSSLoaders
Newton's cradle loader
Five hanging balls where the first and the last swing out in turns.
Settings
16px
1x
Code
<div class="uv-lnc" role="status"><span class="sr">Loading</span><span class="bar"></span><span class="p"><i></i></span><span class="p"><i></i></span><span class="p"><i></i></span><span class="p"><i></i></span><span class="p"><i></i></span></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Loaders
See all LoadersWhere to use it
The desk toy everyone recognizes makes a calm, satisfying loader for finance tools, physics lessons, productivity apps and office dashboards. A bar holds five strings with glossy balls; the outer balls swing out and back in turns with an easing that mimics momentum, while the middle ones stay still.
The balls are styled with a radial gradient for a metallic look, built from your two colors. Speed changes the pace of the swing, and everything is plain CSS transforms that run smoothly on any device.