Linear Progress Bar

The Linear Progress Bar widget visually represents the progress of an operation in a horizontal bar form. It can work in two modes:

• Determinate – shows actual progress (e.g., 35%, 70%, 100%).

• Indeterminate – shows a continuous animation when the exact progress is unknown.

This widget is useful for loading states, uploads, background tasks, and any process where you want to keep the user informed in a compact, horizontal way (e.g., below a button, inside a card, or at the top of the screen).

https://www.youtube.com/watch?v=placeholder-linear-progress-tutorialwww.youtube.com

Adding a Linear Progress Bar Widget

The Linear Progress Bar widget is located in the Form Elements section of the Widget Palette. Once added, you can configure its properties from the Widget Properties Panel.

Use Cases

The Linear Progress Bar shows progress along a line, usually from left to right. Use it whenever you want to visually represent completion or loading in a slim, unobtrusive way.

Use Linear Progress Bar for:

• Loading & Fetching

  • Show progress while downloading, uploading, or syncing data

  • Indicate that a background task (import, export, backup) is in progress

• Step or Task Completion

  • Display how much of a form, onboarding, or setup flow is completed

  • Show “x% complete” for profile, KYC, or configuration steps

• Process Tracking

  • Order status progress (e.g., Placed → Packed → Shipped → Delivered)

  • Progress for generating reports, processing payments, or applying changes

Core Concepts

The Linear Progress Bar:

• Draws a background track (full-width bar).

• Draws a filled portion (indicator) on top of it.

• Uses the type property to decide how to behave:

  • Determinate: Uses progressValue (0–100) to show how much is completed.

  • Indeterminate: Ignores specific percentages and shows a continuous sliding or looping animation.

You can control:

• How it looks → height, indicatorColor, bgColor.

• How it animates → animation, animateFromLastPercent.

• How it behaves → type, progressValue.

Properties

Property	Description
type	The type of progress bar: determinate or indeterminate.
progressValue	The progress value for a determinate progress bar (from 0 to 100). Ignored in indeterminate mode.
height	The thickness (vertical size) of the linear progress bar.
indicatorColor	The color of the progress indicator (the filled part of the bar).
bgColor	The background color of the progress bar’s track (the unfilled portion).
animation	If true, changes in progressValue will be animated rather than jumping abruptly.
animateFromLastPercent	If true, the progress animation starts from the previous value and smoothly moves to the new value.

Default Properties

The Linear Progress Bar widget supports all Default Properties.