ProgressBar

Animated horizontal progress bar with easing, checkpoints, and pause/resume control.

Props

Prop	Type	Default	Description
`duration`	`number`	`5000`	Full animation duration in milliseconds
`trackColor`	`string`	`#e5e7eb`	Background track color
`fillColor`	`string`	`#3b82f6`	Progress fill color
`borderRadius`	`string \| number`	`9999`	Border radius of the bar
`autoStart`	`boolean`	`true`	Start animation automatically on mount
`animation`	`EasingType`	`'linear'`	Easing curve (`'linear'`, `'easeIn'`, `'easeOut'`, `'easeInOut'`)
`checkpoints`	`ProgressBarCheckpoint[]`	`[]`	Checkpoints that fire callbacks or pause the animation
`onCheckpoint`	`(percentage: number) => void`	—	Called when a checkpoint is reached
`onProgress`	`(percentage: number) => void`	—	Called on every whole-number progress change (0—100)
`onComplete`	`() => void`	—	Called when progress reaches 100%
`className`	`string`	—	Container className
`fillClassName`	`string`	—	Fill bar className
`fillStyle`	`CSSProperties`	—	Fill bar style overrides
`style`	`CSSProperties`	—	Container style
`children`	`ReactNode`	—	Content rendered inside the container (e.g. a label overlay)

ProgressBarCheckpoint

Property	Type	Description
`at`	`number`	Percentage (0—100) at which this checkpoint fires
`pause`	`boolean`	If `true`, the progress bar pauses at this checkpoint until resumed

Ref Handle

Method	Description
`start()`	Start the animation from the beginning
`pause()`	Pause the animation
`resume()`	Resume after a pause
`reset()`	Reset to 0 without starting

Example


import { useRef } from 'react'
import { ProgressBar, type ProgressBarHandle } from '@appfunnel-dev/sdk/elements'
 
export default function LoadingPage() {
  const barRef = useRef<ProgressBarHandle>(null)
 
  return (
    <ProgressBar
      ref={barRef}
      duration={3000}
      fillColor="#2FAD39"
      animation="easeOut"
      checkpoints={[{ at: 50, pause: true }]}
      onCheckpoint={(pct) => console.log(`Reached ${pct}%`)}
      onComplete={() => console.log('Done!')}
    />
  )
}