Velocity X Components

Core UI

Progress Bar & Circular Progress

Linear bar and circular ring progress indicator in one component, each with a determinate and an indeterminate mode.

Subscription Included with the Velocity Components subscription.
bash 
$ velocityx add progress-indicators

Built for astro.

Full docs for Progress Bar & Circular Progress →

Needs a licence key — subscribe here, then velocityx loginonce.

astro v1.0.0
Progress Bar & Circular Progress
Uploading assets62%
Syncing with Pipedrive
80%

Props

NameTypeRequiredDefaultDescription
type'bar' | 'circular'No'bar'
valuenumberNo0
labelstringNo0-100
sizenumberNo56
indeterminatebooleanNofalsecircular only, px

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text 
components/velocity/progress-indicators/ProgressIndicators.astro

Using the Progress Bar & Circular Progress component

Install it with velocityx add progress-indicators. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

All 406 components

Related components

More from Core UI.

Avatar + Avatar GroupFree

Single avatar or an overlapping stack with a plus-N overflow chip, falling back to deterministic initials-over-tint when no image is given.

astro
Badge / Tag SetFree

Single pill component covering solid, soft, and outline badge variants across brand and semantic tones, with an optional removable tag mode.

astro
BreadcrumbsFree

Static breadcrumb trail with BreadcrumbList microdata that collapses the middle segments into an ellipsis on long paths.

astro
Button SetFree

One button primitive covering primary/secondary/ghost/destructive variants, three sizes, a loading spinner state, and an icon-only mode.

astro