How can I customize loading indicators in React?

How can I customize loading indicators in React?

You can customize loading indicators in React by using CSS for styling and state management to control their visibility.

Can you show me an example of a custom loading spinner?

Sure! You can create a simple spinner using CSS animations. Here's a basic example:

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

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

And in your React component, you can use it like this:

return <div className="spinner"></div>;

How do I control the loading state in my component?

You can manage the loading state using React's useState hook. For example:

const [loading, setLoading] = useState(true);

useEffect(() => {
  // Simulate a data fetch
  setTimeout(() => setLoading(false), 2000);
}, []);

return loading ? <div className="spinner"></div> : <div>Data Loaded!</div>;