Component

Progress

Show determinate, indeterminate, or scroll-following progress bars for articles and workflows.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Progress } from "@chitrank2050/monoline-ui/progress"

Basic usage

<Progress value={32} />
<Progress value={null} />
<Progress followScroll className="w-full" />

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Progress covers known completion, indeterminate work, and document scroll position.

Avoid when

People need discrete steps, an editable value, or a static status label instead.

Accessibility

Progress exposes role progressbar and normalized value attributes, and callers must provide an accessible label or labelledby relationship.

Client Component

This component needs browser JavaScript for state or browser APIs.

API reference

Props, slots, and callbacks available on this component.

valuenumber | nullDeterminate value. Null renders indeterminate.

maxnumberUpper bound for determinate scaling

size"sm" | "md" | "lg"Track thickness

followScrollbooleanDrive the indicator from document scroll

classNamestringUse for full-width and under-navbar placement

Design tokens

Theme variables this component reads for color, spacing, and motion.

--accentCSS varIndicator colour

--borderCSS varTrack colour

--duration-microCSS varDeterminate width transition timing

progress-loopCSS varIndeterminate sweep animation

Implementation

The source used by the example above, including any state it needs.

import { Navbar } from "@chitrank2050/monoline-ui/navbar"
import { Progress } from "@chitrank2050/monoline-ui/progress"
import { Button } from "@chitrank2050/monoline-ui/button"

export function ReadingHeader() {
  return (
    <>
      <Navbar
        brand="Chitrank"
        links={[{ href: "/blog", label: "Blog", active: true }]}
        actions={<Button size="sm" variant="secondary">Contact</Button>}
        sticky
      />
      <Progress followScroll className="w-full" />
    </>
  )
}

Compare related components or review the package and theme setup.

01ComponentStatusComponent · ReferenceReference→02ComponentSkeletonComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview