WinProgressBar

A progress bar with a navy gradient fill on a sunken track. Animates smoothly.

When to use

Use WinProgressBar to indicate task completion, loading progress, or scoring thresholds.

When not to use

Do not use WinProgressBar for indeterminate loading states — it requires a numeric value.

Installation

Install the package:

npm install win2k-ui

Then import the component:

import { WinProgressBar } from 'win2k-ui'

Make sure you have Tailwind CSS v4 set up, then add this to your root CSS file:

@import "tailwindcss";
@import "win2k-ui/styles.css";

No other dependencies required. The components ship with zero third-party UI dependencies — just Tailwind CSS 4 and React.

Preview

Interactive examples showing various states and configurations. Click “Show Code” to view the source for each variation.

At 0%

Waiting to start...

At 45%

Installing components...

At 100%

✓ Complete

Interactive

Props

All available props for the WinProgressBar component.

Prop	Type	Default	Description
`value`	`number`	`—`	Progress value, 0–100.
`className`	`string`	`''`	Additional CSS classes.

Usage

Example showing the component in a typical context:

import { WinProgressBar } from 'win2k-ui'

export function Example() {
  return (
    <div className="flex flex-col gap-2">
      <WinProgressBar value={45} />
      <p className="text-[12px] text-win-muted">45% complete</p>
    </div>
  )
  }

Notes

The progress bar is the only component that uses a CSS transition (`transition: width 1s linear`) for smooth animation. The value is automatically clamped to 0–100. The fill gradient matches the title bar gradient for visual consistency.