Skip to content
Velkin LogoVelkin Logo
Velkin
VELKIN/UI

Modern UI components for product teams and their AI agents. Lit core, typed wrappers, live MCP.

sales@velkinui.com

Product

  • Docs
  • Components
  • Studio
  • Pricing

Resources

  • Quick start
  • Blog
  • Changelog
  • Roadmap
  • Status

Project

  • About
  • Contact
  • License
  • Privacy
  • Terms

© 2026 Velkin. MIT core · Pro licenses available.

VELKIN

Progress

A progress component with linear, ring, and indeterminate modes.

vu-progress · @velkin/react/progress

Copy page

Import

React
npm i @velkin/react

import { VuProgress } from "@velkin/react/progress";

Examples

API

Props

PropTypeDefaultDescription
variantVuProgressVariant"default"Linear rail style or ring mode. Default: `"default"`.
valuenumber0Determinate fill from 0 to max. Default: `0`.
maxnumber100Maximum value for normalization. Default: `100`.
buffernumber0Buffered amount behind the fill. Default: `0`.
indeterminatebooleanfalseAnimated unknown-progress mode. Default: `false`.
sizeVuProgressSize"md"Track thickness preset. Default: `"md"`.
toneVuProgressTone"normal"Neutral rail weight behind the fill. Default: `"normal"`.
blockbooleanfalseStretches to the container width. Default: `false`.
colorVuProgressColor"primary"Foreground fill intent token. Default: `"primary"`.
speedstring"1s"Indeterminate animation duration. Default: `"1s"`.
labelstring""Accessible name; empty uses locale catalog. Default: `""`.

CSS parts

PartDescription
containerOuter track shell or ring frame.
barForeground fill in determinate mode.
bufferBuffered segment behind the fill.
indeterminateAnimated segment in indeterminate mode.
trackRing track stroke (`variant="ring"` only).

Types

NameDefinition
VuProgressColor
"default" | "primary" | "success" | "warning" | "danger"
VuProgressSize
"sm" | "md" | "lg"
VuProgressTone
"subtle" | "normal" | "strong"
VuProgressVariant
"outline" | "default" | "underline" | "ring"

Related

Feedback

  • AlertAn alert component with intent colors, variants, and optional dismiss.
  • DialogA dialog component with region slots, focus trap, and backdrop.
  • DrawerA drawer component with slide-in panel, backdrop, and focus trap.
  • NotificationA notification component that renders the toast viewport.
  • OverlayAn overlay component with backdrop and centered content slot.
  • PopoverA popover component with smart placement and a trigger slot.

Guides

  • AccessibilityLabels and overlays
  • AppearanceStatus colors

Browse

  • Previous: PopoverEarlier in the sidebar
  • Next: SkeletonLater in the sidebar
  • All componentsBrowse the full index