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/video-uploader-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
styles	ProgressBarStyles	none	Slot map applied to internal elements (see Slots below)
children	(progress: number) => ReactNode	none	Render-prop override; replaces the default track-and-fill markup entirely

Custom rendering

Pass a children render function to bypass the default markup and draw your own indicator. When children is provided, all style/className/slot props are ignored: you own the rendering.

<ProgressBar progress={progress}>
  {(value) => <span>{value}%</span>}
</ProgressBar>

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)" }}
/>

Slots

Pass a styles slot map to theme the track and fill from one prop. Useful when threading ProgressBar through a parent’s slot map (e.g., FileItem’s progressTrack/progressFill slots map onto these). See Theming for the canonical merge-order explanation.

Slot	Targets
track	The outer track element
fill	The inner fill element

<ProgressBar
  progress={75}
  styles={{
    track: { height: 8, borderRadius: 4, background: "#1e293b" },
    fill: { background: "#38bdf8" },
  }}
/>

Precedence

trackStyle and fillStyle props win over styles.track and styles.fill. The merge order is defaults -> styles.track -> trackStyle (and likewise for fill), preserving the existing direct-prop API as the most-specific override:

<ProgressBar
  progress={50}
  styles={{ fill: { background: "red" } }}
  fillStyle={{ background: "blue" }} // wins: fill is blue
/>