Skip to content

Progress Bar

The Progress Bar element displays a visual progress indicator as either a horizontal bar or a circular ring. Use it for completion tracking, loading states, or metric displays.


Overview

Two visual variants are available:

  • Bar -- horizontal fill bar with optional stripes and animation
  • Circle -- SVG ring that fills clockwise with a centered value

Both support customizable colors, labels, and value formatting.


Adding a Progress Bar

  1. Open the Website Builder
  2. Find Progress Bar in the Elements panel (under Display)
  3. Drag it onto your page
  4. Configure the variant and value in the General Tab

Properties

General Tab

PropertyDescriptionDefault
VariantDisplay type: bar or circlebar
ValueCurrent progress value65
MaxMaximum value (100 = percentage)100
LabelText label displayed above the barEmpty
Show ValueDisplay the numeric valuetrue
Value FormatHow to display the value: percent, fraction, or valuepercent

Bar-Specific Properties

PropertyDescriptionDefault
Bar ColorFill color of the progress bar#2B98E0
Track ColorBackground track color#e9ecef
HeightBar height in pixels12
Border RadiusCorner rounding in pixels6
StripedShow diagonal stripe patternfalse
AnimatedAnimate the stripes (requires Striped to be on)false

Circle-Specific Properties

PropertyDescriptionDefault
Circle SizeDiameter of the circle in pixels80
Circle StrokeWidth of the ring stroke in pixels8
Bar ColorRing fill color#2B98E0
Track ColorBackground ring color#e9ecef

Value Format Options

FormatExample (value=65, max=100)
Percent65%
Fraction65/100
Value65

Use Cases

  • Form completion -- show how much of a multi-step form is done
  • Upload progress -- indicate file upload status
  • Dashboard metrics -- display KPIs as visual gauges
  • Skill levels -- show proficiency ratings
  • Loading indicators -- animated striped bar for pending operations

Questions?

If you have any questions, please don't hesitate to contact us.

No-Code App Builder