How can I add animation to loading indicators in React?

How can I add animation to loading indicators in React?

You can use CSS animations or libraries like Framer Motion to animate loading indicators in React.

Can you show me an example using CSS animations?

Sure! You can create a simple spinner using CSS like this:

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

And then use it in your component!

How do I integrate this spinner into my React component?

You can integrate it like this:

import React from 'react';
import './Spinner.css'; // Assuming your CSS is in Spinner.css

const LoadingIndicator = () => {
  return <div className='spinner'></div>;
};

export default LoadingIndicator;

What if I want to use a library instead?

You can use Framer Motion. First, install it with npm install framer-motion, then you can create animated components easily!