Progress & Loading API

Full surface of the loading trio: the linear oge-progress-bar, the ring oge-load-indicator, the oge-skeleton placeholder and their config providers.

Properties Events Types

OgeProgressBar

oge-progress-bar

Properties 8

Name	Type	Default	Description
`value`	`number \| null`	`null`	Current value; `null` renders the indeterminate sliding bar — and `aria-valuenow` is then omitted entirely (the ARIA rule), never pinned to a sentinel.
`min / max`	`number`	`0 / 100`	Scale bounds; the fill ratio clamps into them.
`bufferValue`	`number \| undefined`	—	Material's buffer layer — a soft second fill behind the primary one (media pre-loading behind the play position).
`chunkCount`	`number \| undefined`	—	Renders the bar as N discrete segments (Kendo's chunk progress bar); the filled count is the rounded ratio.
`severity`	`'accent' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	Fill color — the card/toast severity vocabulary; recolors the fill only.
`showLabel`	`boolean`	`false`	Renders the formatted value next to the bar (rounded percent by default).
`formatLabel`	`(value: number, ratio: number) => string \| undefined`	—	Formats the visible label and `aria-valuetext` — DevExtreme's `statusFormat` in the house argument order; display and announcement never diverge.
`ariaLabel`	`string \| undefined`	—	Accessible name; the localized `progress` message is the fallback. A progressbar must always be named.

Events 1

Name	Type	Description
`completed`	`OgeProgressBarCompletedEvent`	The value reached `max` — DevExtreme's `onComplete`. Fired once per arrival: staying at max is silent, re-crossing after a reset fires again.

Types 2

Name	Type	Description
`OgeProgressBarSeverity`	`'accent' \| 'success' \| 'warning' \| 'danger'`	Fill color vocabulary.
`OgeProgressBarCompletedEvent`	`{ value: number }`	Payload of `completed`.

OgeLoadIndicator

oge-load-indicator

Properties 5

Name	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Ring diameter preset — 16/24/32px.
`inheritSize`	`boolean`	`false`	A `1em` ring that scales with the surrounding font — the inside-a-button case.
`severity`	`'accent' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	Ring color — the card/toast severity vocabulary.
`ariaLabel`	`string \| undefined`	—	Accessible name; the localized `loading` message is the fallback.

Accessibility contract

Name	Type	Default	Description
`role="progressbar", no aria-valuenow`	`—`	—	Deliberately indeterminate-only (dx, Kendo and PrimeNG all are — a circle filling toward completion is the progress bar’s job), announced without `aria-valuenow` per the ARIA rule. Under `prefers-reduced-motion` the spin slows rather than stops: a frozen ring reads as finished.

OgeSkeleton

oge-skeleton

Properties 5

Name	Type	Default	Description
`shape`	`'text' \| 'circle' \| 'rectangle'`	`'text'`	What the placeholder stands in for; a `text` skeleton with no height derives it from the font.
`animation`	`'shimmer' \| 'pulse' \| 'none'`	`'shimmer'`	`shimmer` is the card/accordion moving-gradient recipe, `pulse` the data grid filler rows' opacity beat, `none` a static block.
`width / height`	`string \| number \| undefined`	—	Numbers mean pixels; strings pass through as CSS.
`lines`	`number`	`1`	`text` shape only: renders N stacked lines with the last one tapered — the card/accordion placeholder pattern as one input. Capped at 20.

Accessibility contract

Name	Type	Default	Description
`aria-hidden, always`	`—`	—	A skeleton is decoration — the loading region owns the announcement. Put `aria-busy` (and, where the change should be announced, a visually-hidden status text) on the container the skeleton stands in for.

Configuration

Properties 4

provideOgeProgressBarConfig()

Name	Type	Description
`messages`	`OgeProgressBarMessages`	Every user-facing string: `progress` — the accessible name fallback (default `Progress`).
`severity / showLabel`	`—`	Defaults for the matching inputs.

provideOgeLoadIndicatorConfig()

Name	Type	Description
`messages`	`OgeLoadIndicatorMessages`	Every user-facing string: `loading` — the accessible name fallback (default `Loading`).

provideOgeSkeletonConfig()

Name	Type	Description
`shape / animation`	`—`	Defaults for the matching inputs. Deliberately no messages block: a skeleton renders no user-facing strings — the loading region owns the announcement.