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

• 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

📦 Installation

npm install react-win7-progressbar

🛠 Usage

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