Bouncy Loader
A clean loading screen with stacked boxes that rise and fall in sequence, giving a clear sense of ongoing activity while content or data is being loaded.
Live Interactive Preview
Source
npx futureuikit add boxy-bounce Details
Uses multiple boxes moving up and down to show loading progress.Helps users understand that a process is currently running.Suitable for page loads, API requests, and async actions.Smooth animation keeps the interface feeling responsive.Lightweight and easy to integrate into any layout.Colors and size can be customized through CSS variables.
How to Use?
- Insert the loading screen markup where content may take time to appear.
- Place it inside the container that will later show your main content.
- Display it during data fetching, API calls, or background processing.
- Remove or hide it once the task is completed and content is ready.
- Use it in pages, sections, or modals to indicate active progress.
- Center it within the layout for better visual focus.
- Adjust colors and size in CSS to match your application style.