react-win7-progressbar/README.md

A Windows 7 styled ProgressBar component for React with auto-fill.

## ⬛ react-win7-progressbar (7.css - wrapper)

[![NPM](https://img.shields.io/npm/v/react-win7-progressbar.svg)](https://www.npmjs.com/package/react-win7-progressbar)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

+ A flexible **Windows 7–style Progress Bar** component for React, built with **styled-components**.

+ Supports multiple variants, labels, auto-fill animation, marquee, paused/error states, and custom colors.

---

### 🚀 Live Demo

👉 [Codesandbox](https://codesandbox.io/p/sandbox/83t4jk)

---

### 📦 Installation

```bash
npm install react-win7-progressbar
```

---

### 🛠 Usage

```tsx
import React, { useState } from "react";
import ProgressBar from "react-win7-progressbar";

export default function App() {
  const [value, setValue] = useState(30);

  return (
    <div style={{ padding: 20 }}>
      <h3>Default ProgressBar</h3>
      <ProgressBar value={value} />

      <h3>Paused Variant</h3>
      <ProgressBar value={value} variant="paused" />

      <h3>Error Variant</h3>
      <ProgressBar value={value} variant="error" />

      <h3>Animate / Marquee</h3>
      <ProgressBar variant="animate" />
      <ProgressBar variant="marquee" />

      <h3>Auto-fill</h3>
      <ProgressBar auto speed={5} onComplete={() => alert("Done!")} />

      <h3>Label & Display Value</h3>
      <ProgressBar
        value={value}
        labelPosition="topCenter"
        label={(val) => `Progress: ${val}%`}
      />
    </div>
  );
}
```

---

### ⚙️ `<ProgressBar>` Props

| Prop            | Type                                                                   | Default      | Description                                                                                  |
| --------------- | ---------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------- |
| `value`         | `number` (0-100)                                                       | `0`         | Current progress value                                                                        |
| `width`         | `number \| string`                                                     | `300`       | Width of the progress bar                                                                     |
| `height`        | `number`                                                               | `15`        | Height of the progress bar                                                                    |
| `color`         | `string`                                                               | `#0bd82c`   | Fill color                                                                                    |
| `variant`       | `"default" \| "paused" \| "error" \| "animate" \| "marquee"`           | `"default"` | Visual variant of the progress bar                                                            |
| `auto`          | `boolean`                                                              | `false`     | Auto fill the bar when `value` is not set                                                     |
| `speed`         | `number` (seconds)                                                     | `5`         | Speed of auto-fill                                                                            |
| `labelPosition` | `"topLeft" \| "topCenter" \| "topRight" \| "bottomLeft" \| "bottomCenter" \| "bottomRight" \| "center" \| "centerLeft" \| "centerRight"` | `"center"`  | Position of the label relative to the bar                                                   |
| `label`         | `string \| (value: number) => React.ReactNode`                         | —           | Custom label or function returning a React node                                               |
| `displayValue`  | `boolean`                                                              | `true`      | Show value as percentage if `label` is not provided                                           |
| `onComplete`    | `() => void`                                                           | —           | Callback called when progress reaches 100% (only for auto mode)                               |

---

### ✨ Features

* **Windows 7–style progress bar** design
* Variants: `default`, `paused`, `error`, `animate`, `marquee`
* Auto-fill animation with `auto` + `speed`
* Customizable **label text & position**
* Show numeric progress value dynamically
* Fully styled with **styled-components**
* Lightweight & responsive

---

### 📋 License