How can I customize a loading spinner in React?

How can I customize a loading spinner in React?

You can customize a loading spinner in React by using CSS or libraries like React Spinners. What style do you have in mind?

I want a circular spinner with a gradient color.

You can achieve that by using CSS animations. Here's a simple example:

.spinner {
  border: 8px solid transparent;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

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

You can add a gradient background to the spinner as well!

Can you show me how to implement it in a React component?

Sure! Here’s a simple React component that uses the spinner:

import React from 'react';
import './Spinner.css'; // Make sure to import your CSS file

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

export default Spinner;

That looks great! How do I use this spinner while fetching data?

You can use state to manage loading. Here’s an example:

const App = () => {
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    fetchData().then(() => setLoading(false));
  }, []);

  return loading ? <Spinner /> : <div>Data Loaded!</div>;
};