React Loading Component

A customizable React loading component with a spinning animation.

📦 Installation

npm install th-loading

Usage

✅ Basic Usage

import { Loading } from 'th-loading';

function App() {
  return <Loading />; // Uses default loading image
}

🖼️ Custom Image

import { Loading } from 'th-loading';

function App() {
  return (
    <Loading imageUrl="https://path.to/your/custom/loading.gif" />
  );
}

⚙️ Props

| Prop | Type | Required | Default | Description | |-----------|--------|----------|-------------------------------------------------------------------------|-----------------------------| | imageUrl | string | No | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFzebLh8zihBChP2pwfn2kwgJr2_IgwxSIqQ&s" | URL of the loading image |

🎨 Styling

The component comes with default styles but can be customized using CSS. Below are the default classes:

/* Centers the loader in its container */
.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Styles for the loading image */
.loader {
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

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

💡 Example: Conditional Loading State

import React, { useState, useEffect } from 'react';
import { Loading } from 'th-loading';

function MyComponent() {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setIsLoading(false), 3000); // Simulate loading
  }, []);

  return (
    <div>
      {isLoading ? <Loading /> : <div>Your content here</div>}
    </div>
  );
}

🌐 Browser Support

Compatible with all modern browsers:

• Chrome
• Firefox
• Safari
• Edge

🤝 Contributing

Contributions are welcome! Please feel free to open an issue or submit a Pull Request.

📄 License

MIT © Refael Levi

🆘 Support

If you encounter any issues or have questions, please open an issue on GitHub.