Boxy Loader
A dynamic box-style loading screen where blocks stretch and shift positions, creating a smooth visual cue that content is being prepared in the background.
Live Interactive Preview
Source
npx futureuikit add boxy-shift Details
Shows boxes stretching and changing positions to indicate loading.Gives clear feedback that work is happening in the background.Well suited for page loads, data processing, and transitions.Smooth animation keeps users engaged during wait times.Lightweight design that doesn’t impact performance.Easy to customize size and colors using CSS.
How to Use?
- Add the loading screen markup to the area where content will appear after loading.
- Place it inside a wrapper that controls your layout or section.
- Show it while heavy tasks or data processing are running.
- Hide it as soon as the final content is ready to display.
- Use it on full pages or inside cards, modals, and panels.
- Keep it centered to maintain a clear focus during loading.
- Tweak colors and size in CSS to fit your design system.