ProgressBar

ProgressBar renders a track-and-fill progress indicator. It accepts progress (0–100) and optional style props for both the track and fill elements independently.

0%

33%

67%

100%

import { ProgressBar } from "@hyperserve/upload-react";

<ProgressBar progress={75} />

Props

Prop	Type	Default	Description
progress	number	required	0–100
trackStyle	CSSProperties	none	Styles for the track element
fillStyle	CSSProperties	none	Styles for the fill element
trackClassName	string	none	Class for the track
fillClassName	string	none	Class for the fill

Styling

The track and fill are separate elements, each accepting their own style and className props:

<ProgressBar
  progress={75}
  trackStyle={{ height: 8, borderRadius: 4 }}
  fillStyle={{ background: "linear-gradient(90deg, #06b6d4, #3b82f6)" }}
/>