Basic Loader

A modern, animated loading indicator with multiple visual styles. Built with Framer Motion, it provides smooth and engaging feedback while users wait for content or data to load.

Live Interactive Preview

Modern Rings...

Clean Dots...

Minimal...

Source
npx futureuikit add basic
Details

Built with Framer Motion for high-quality, smooth animations.Supports Modern (Rings), Clean (Dots), and Minimal (Circle) variants.Fully customizable color for the loading indicator.Lightweight and highly responsive design.Optional animated loading text with a pulse effect.Perfect for page transitions, API calls, and data fetching states.

How to Use?
  • Import BasicLoader into your React component.
  • Choose a variant: 'modern', 'clean', or 'minimal'.
  • Pass a custom color to match your brand's theme.
  • Optionally provide a custom loading text or disable it.
  • Use it to indicate progress during asynchronous operations.