WEBRAD / TECHNICAL REFERENCE

Progress Bar

Linear or circular progress with a range, value, and calculated percentage.

WebProgressBarStandardVisual2 events

Quick start

Add ProgressBar1 in the Designer. Use the example in a page method.

ProgressBar1.setRange(0, 200);
ProgressBar1.value = 50;
ProgressBar1.showValue = true;
ProgressBar1.increment(10);
Message(ProgressBar1.percentage);
// ProgressBar1.reset();

format accepts bars (bar), dunnet (ring), and circus (circle).
setRange(min, max) sets the range; value sets progress. percentage is calculated.
showValue displays the percentage; increment() advances and reset() returns to the minimum.

More examples

All formats

import type { WebProgressBarFormat } from '@webrad/runtime';
const formats: readonly WebProgressBarFormat[] = ['bars', 'dunnet', 'circus'];
ProgressBar1.format = formats[1] ?? 'dunnet'; // Ring; bars = bar, circus = circle.
ProgressBar1.setRange(0, 100);
ProgressBar1.value = 65;
ProgressBar1.showValue = true;

Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

Property / source	Type and options	Default	Runtime access
`name`Name · Identity	`string`	`—`	name
`x`Left · Size & position	`number`	`0`	x
`y`Top · Size & position	`number`	`0`	y
`width`Width · Size & position	`number`	`240`	width
`height`Height · Size & position	`number`	`28`	height
`itemWidth`Responsive width · Responsive sizeFit content grows the item to its widest rendered child and preserves child intrinsic widths; minimum and maximum width remain limits.	`enumfixed` `stretch` `fit-content`	`"fixed"`	Inspector / configuration
`itemHeight`Responsive height · Responsive sizeFit content grows the item to its lowest rendered child and preserves child intrinsic heights; minimum and maximum height remain limits.	`enumfixed` `stretch` `fit-content`	`"fixed"`	Inspector / configuration
`itemMinWidth`Minimum width · Responsive size	`number`	`0`	Inspector / configuration
`itemMaxWidth`Maximum width · Responsive size	`number`	`null`	Inspector / configuration
`itemMinHeight`Minimum height · Responsive size	`number`	`0`	Inspector / configuration
`itemMaxHeight`Maximum height · Responsive size	`number`	`null`	Inspector / configuration
`itemGrow`Grow · Responsive size	`number`	`0`	Inspector / configuration
`itemShrink`Shrink · Responsive sizeAllows fixed and stretch flow items to yield space. Fit-content keeps its intrinsic size so its children are not compressed.	`boolean`	`true`	Inspector / configuration
`itemAlignSelf`Item alignment · Responsive sizeCross-axis alignment for this item in a row or column. Auto inherits the parent alignment; responsive cross-axis stretch retains its sizing behavior.	`enumauto` `start` `center` `end` `stretch`	`"auto"`	Inspector / configuration
`itemHorizontalAnchor`Horizontal anchor · Anchors & offsets	`enumstart` `center` `end` `stretch`	`"start"`	Inspector / configuration
`itemVerticalAnchor`Vertical anchor · Anchors & offsets	`enumstart` `center` `end` `stretch`	`"start"`	Inspector / configuration
`itemLeft`Left inset · Anchors & offsets	`number`	`0`	Inspector / configuration
`itemRight`Right inset · Anchors & offsets	`number`	`0`	Inspector / configuration
`itemTop`Top inset · Anchors & offsets	`number`	`0`	Inspector / configuration
`itemBottom`Bottom inset · Anchors & offsets	`number`	`0`	Inspector / configuration
`margin`Margin · SpacingOuter spacing on all four sides, in pixels. Row and column layouts include this spacing between components.	`number`	`0`	margin
`marginTop`Margin top · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginTop
`marginRight`Margin right · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginRight
`marginBottom`Margin bottom · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginBottom
`marginLeft`Margin left · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginLeft
`visible`Visible · Behavior	`boolean`	`true`	visible
`collapseWhenHidden`Collapse when hidden · BehaviorRemoves the component from the layout while it is not visible.	`boolean`	`true`	collapseWhenHidden
`enabled`Enabled · Behavior	`boolean`	`true`	enabled
`format`Format · Appearancebars: horizontal bar; dunnet: donut ring; circus: filled circle.	`enumbars` `dunnet` `circus`	`"bars"`	format
`min`Minimum · ProgressFinite progress value. Maximum must exceed minimum; the displayed value is clamped to the range.	`number`	`0`	min
`max`Maximum · ProgressFinite progress value. Maximum must exceed minimum; the displayed value is clamped to the range.	`number`	`100`	max
`value`Value · ProgressFinite progress value. Maximum must exceed minimum; the displayed value is clamped to the range.	`number`	`50`	value
`showValue`Show percentage · Appearance	`boolean`	`true`	showValue
`currentRowBindings`Current row · DataBind writable visual values to fields of this repeated row.	`current-row-bindings`Editor: current-row-bindings	`[]`	currentRowBindings

API in code

Member	Signature	Access
`value`	`value: number;`	Read and write
`min`	`min: number;`	Read and write
`max`	`max: number;`	Read and write
`format`	`format: WebProgressBarFormat;`	Read and write
`showValue`	`showValue: boolean;`	Read and write
`percentage`	`readonly percentage: number;`	Read-only
`onChange`	`set onChange(handler: WebComponentEventHandler<this> \| null);`	Read and write

`setRange`

method

setRange(min: number, max: number): void;

Example

ProgressBar1.setRange(0, 100);

`increment`

method

increment(amount?: number): void;

Example

ProgressBar1.increment(5);

`reset`

method

reset(): void;

Example

ProgressBar1.reset();

Inherited members (27)

Member	Signature	Access
`currentRowBindings`	`currentRowBindings: readonly WebCurrentRowBinding[];`	Read and write
`element`	`readonly element: TElement;`	Read-only
`id`	`readonly id: string;`	Read-only
`name`	`readonly name: string;`	Read-only
`visible`	`visible: boolean;`	Read and write
`collapseWhenHidden`	`collapseWhenHidden: boolean;`	Read and write
`enabled`	`enabled: boolean;`	Read and write
`x`	`x: number;`	Read and write
`y`	`y: number;`	Read and write
`width`	`width: number;`	Read and write
`height`	`height: number;`	Read and write
`margin`Outer spacing on all four sides, in pixels.	`margin: number;`	Read and write
`marginTop`	`marginTop: number;`	Read and write
`marginRight`	`marginRight: number;`	Read and write
`marginBottom`	`marginBottom: number;`	Read and write
`marginLeft`	`marginLeft: number;`	Read and write
`alignSelf`	`alignSelf: RuntimeLayoutAlignSelf;`	Read and write
`tabIndex`	`tabIndex: number;`	Read and write
`backgroundColor`	`backgroundColor: string;`	Read and write
`color`	`color: string;`	Read and write
`borderColor`	`borderColor: string;`	Read and write

`focus`

method

focus(options?: FocusOptions): void;

`show`

method

show(): void;

`hide`

method

hide(): void;

`bindEvent`

method

bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;

`emit`

method

emit(eventName: string, detail?: unknown): boolean;

`dispose`

method

dispose(): void;

Events

Link methods in Interaction. How to use events.

OnChange

Standard event (Event).

Signature and example

import type { WebProgressBar } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async ProgressBar1Change(
    sender: WebProgressBar,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

OnClick

Standard event (Event).

Signature and example

import type { WebProgressBar } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async ProgressBar1Click(
    sender: WebProgressBar,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}