react-wave-loader-line v0.1.1

react-wave-loader-line

A simple, animated progress line component for React, built with Vite and customizable with CSS.

🚀 Installation

Install the package using npm:

npm install react-wave-loader-line

or using yarn:

yarn add react-wave-loader-line

🔧 Usage

Import the component and the CSS file in your React project:

import { ProgressLine } from "react-wave-loader-line";
import "react-wave-loader-line/dist/react-wave-loader-line.css";

function App() {
  return (
    <div>
      <h1>React Wave Loader</h1>
      <ProgressLine />
    </div>
  );
}

export default App;

🎨 Customization

The loader is styled with CSS, and you can override the default styles by targeting these classes:

.progress-line-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
}

.progress-line-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.bar {
  width: 4px;
  height: 32px;
}

.bar-1 {
  background-color: #3b82f6;
}

.bar-2 {
  background-color: #60a5fa;
}

.bar-3 {
  background-color: #93c5fd;
}

🛠 Development & Contribution

If you want to contribute or modify the package:

1. Clone the repository
2. Install dependencies: npm install
3. Run development build: npm run dev

For local testing in another project:

npm link  # In the package directory
cd ../your-test-project
npm link react-wave-loader-line

📜 License

MIT License © 2024 khush