How can I use CSS modules to create spinners?

How can I use CSS modules to create spinners?

You can create spinners using CSS modules by defining styles in a module file and applying them to your spinner component.

Can you show me an example of a CSS module for a spinner?

Sure! Here's a simple example:

/* Spinner.module.css */
.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); }
}

How do I use this CSS module in my React component?

You can import the CSS module in your component like this:

import styles from './Spinner.module.css';

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

What if I want to customize the spinner's color?

You can customize the spinner's color by changing the border-top property in the CSS module to your desired color.