Orvain UI

Progress Bars

Progress bars are tracks with a fill that report where something stands as a share of a whole the reader can see.

Get Pro to installPro20 blocksReact, Vue and Figma
MCPConnect the MCP server
CompressOptional
25.1 MBof 48.2 MB

Medium · Fine for sharing and review. Saves 23.1 MB.

Every block in the set#

Compression Progress Bar

File compression, quality sliders, stepped settings

Compression, shrink

One file compressed to a chosen level, where the size is the story

Compression, queue

Batch jobs where every file has its own progress

Spending Progress Bar

Budgets, quota meters, usage-vs-limit dashboards

Spending, pace

Budgets where the date matters as much as the amount

Spending, allowance

Budgets that should answer how much can I spend today

Graph Progress Bar

Capacity dials, radial KPI meters, goals counted per period

Graph, history

A KPI that should show its shape over the period

Graph, versus

A KPI judged against the same point of last period

Intensity Progress Bar

Sensitivity controls, difficulty sliders, effect strength

Intensity, auto

Settings a device can tune itself, with a way to take over

Gauge Progress Bar

Roll/tilt indicators, telemetry dials, vehicle dashboards

Gauge, horizon

Orientation readouts where the vehicle itself should tilt

Gauge, level

Two-sided readings where the worst case matters

Usage against a target

Plan limits and quotas, where the target matters as much as the cap

Usage against a target, pace

Quotas where the date decides whether usage is a problem

Usage against a target, set the target

Setting several quota targets in one place

Readings in their normal range

Lab results and any reading judged against its own reference range

Readings, one ruler

Panels where how far out each reading is matters more than its unit

Readings, trend

Results followed over time, where the direction matters

When to use#

  • A multi-step flow where the person should see how many steps remain
  • A quota or budget shown against the ceiling it is measured from
  • A setting with a continuous range whose value is worth reading back
  • A single operation whose total size is known before it starts

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in BlocksSee plans