a loading animation like a spinning wheel
I'll create a loading animation that looks like a spinning wheel using React and Framer Motion. This will be a reusable component that you can easily integrate into your Next.js application.
This code creates a LoadingSpinner component that uses Framer Motion to create a smooth, continuous rotation animation. The component is customizable, allowing you to specify the size and color of the spinner.
Key features of this implementation:
div with a border. The top border is transparent, creating the "incomplete circle" effect.animate prop is used to create a continuous 360-degree rotation.size and color props for easy customization.The Home component demonstrates how to use the LoadingSpinner with different sizes and colors. You can easily integrate this spinner into your application wherever you need to show a loading state.
To use this in your project:
npm install framer-motionLoadingSpinner component into your project.LoadingSpinner component wherever you need a loading indicator.You can further customize the spinner by adjusting the border width, animation duration, or adding additional styling as needed.
use the loader icon from lucide icons instead
I'll update the LoadingSpinner component to use the Loader icon from Lucide Icons instead of creating a custom spinning wheel. This will give us a nice, pre-designed loading icon that we can animate.
This updated implementation uses the Loader icon from Lucide React and animates it using Framer Motion. Here are the key changes and features:
Loader icon from 'lucide-react'.LoadingSpinner component now wraps the Loader icon in a motion.div to apply the rotation animation.size and color, and added a strokeWidth prop to control the thickness of the icon's lines.To use this in your project:
Make sure you have Framer Motion and Lucide React installed:
npm install framer-motion lucide-reactLoadingSpinner component into your project.LoadingSpinner component wherever you need a loading indicator.This implementation gives you a sleek, professional-looking loading spinner that's easily customizable. You can adjust the size, color, and stroke width to match your design needs. The Lucide icon provides a consistent and recognizable design, while the Framer Motion animation ensures smooth rotation.