Rotating Loader
A modern box-style loading screen with four rotating blocks that creates a smooth and engaging visual while content is loading. Ideal for pages, sections, or actions where users need clear feedback that a process is in progress.
Live Interactive Preview
Source
npx futureuikit add boxy-rotate Details
Shows four boxes rotating to indicate an active loading state.Gives users clear visual feedback that something is in progress.Works well for page loads, API calls, and background tasks.Lightweight and smooth animation for a modern UI feel.Easy to customize colors and size using CSS.Can be used as a full-screen loader or inside small sections.
How to Use?
- Add the loading screen markup to the page where content may take time to load.
- Place it inside a container that will hold your main content.
- Display the loader while data is being fetched or a task is processing.
- Hide the loader once the content or result is ready to show.
- Use it on full pages, sections, or inside buttons for visual feedback.
- Keep it centered using flex or grid for a clean loading state.
- Adjust colors in CSS to match your application theme if needed.