Skip to main content
cngx-src documentation

CngxProgress

ComponentPrimaryOnPushNo encapsulationv0.1.0WCAG AA

projects/ui/feedback/loading/progress.ts

GitHub

Import#

import { CngxProgress } from '@cngx/ui/feedback'

Description#

Progress indicator atom - determinate or indeterminate.

Automatically switches between modes based on whether progress is defined:

  • Indeterminate (progress === undefined) - animated line, no value
  • Determinate (progress 0–100) - bar with percentage

CSS transition on bar width (300ms ease-out) smooths jumpy updates. aria-valuenow is only present in determinate mode - AT uses its absence to distinguish the two modes.

With async state

<cngx-progress [state]="uploadState" label="File upload" [showLabel]="true" />

Manual progress

<cngx-progress [progress]="percent()" label="Processing" />

https://cngxjs.github.io/cngx/examples/#/ui/feedback/progress/circular-variant https://cngxjs.github.io/cngx/examples/#/ui/feedback/progress/linear-determinate https://cngxjs.github.io/cngx/examples/#/ui/feedback/progress/linear-indeterminate

Related#

Metadata#

Selector
cngx-progress
Change detection
ChangeDetectionStrategy.OnPush
Encapsulation
ViewEncapsulation.None
Style URLs
./progress.css

Host#

Class
cngx-progress
Static attributes
roleprogressbar
[attr.aria-valuemin]isDeterminate() ? 0 : null
[attr.aria-valuemax]isDeterminate() ? 100 : null
[attr.aria-valuenow]ariaValueNow()
[attr.aria-valuetext]ariaValueText()
[attr.aria-label]label()
Bound classes
cngx-progress--linear ← variant() === "linear" cngx-progress--circular ← variant() === "circular" cngx-progress--determinate ← isDeterminate cngx-progress--indeterminate ← !isDeterminate()

Relationships

Used by4

componentCngxIncrementalListAppend-style collection organism.
componentCngxPaginatorDeclarative, skinnable pagination organism.
componentCngxPaginatorRailProgress-rail segment: a horizontal rail whose fill tracks the current page position, with an overlaid knob riding th…
componentCngxProgressBarStepperProgress-Bar stepper variant.

Index#

Inputs

labelprogressshowLabelstatevariant

HostBindings

class.cngx-progress--linearclass.cngx-progress--circularclass.cngx-progress--determinateclass.cngx-progress--indeterminateattr.aria-valueminattr.aria-valuemaxattr.aria-valuenowattr.aria-valuetextattr.aria-label

Inputs#

label#string
input()

Screen reader label describing what is progressing.

default 'Progress'
progress#number | undefined
input()

Direct progress value (0–100). undefined = indeterminate.

showLabel#boolean
input()

Show percentage label next to the bar.

default false
state#CngxAsyncState | undefined

Bind an async state - reads progress() for determinate mode.

variant#ProgressVariant
input()

Visual variant.

default 'linear'

HostBindings#

BindingExpression
[class.cngx-progress--linear]variant() === "linear"
[class.cngx-progress--circular]variant() === "circular"
[class.cngx-progress--determinate]isDeterminate()
[class.cngx-progress--indeterminate]!isDeterminate()
[attr.aria-valuemin]isDeterminate() ? 0 : null
[attr.aria-valuemax]isDeterminate() ? 100 : null
[attr.aria-valuenow]ariaValueNow()
[attr.aria-valuetext]ariaValueText()
[attr.aria-label]label()

Default visuals for CngxProgress. The host carries .cngx-progress and renders either linear (__track + __fill + __label) or circular (__circle + __circle-track + __circle-fill + centered __label) markup. The cngx-pulse keyframe is duplicated identically in loading-indicator.css so each file is self-contained under styleUrl bundling.

State modifiers

  • --indeterminate - replaces the determinate width / dashoffset transition with cngx-progress-indeterminate (linear sweep) or cngx-progress-spin (circular spin). Under prefers-reduced-motion both fall back to cngx-pulse and the linear fill pins to width: 100%

Variants

  • --linear - flex row of bar + trailing label
  • --circular - inline-flex centered SVG ring with overlaid label

Slots

  • .cngx-progress__track - linear bar track
  • .cngx-progress__fill - linear bar fill (width-bound)
  • .cngx-progress__circle - circular SVG, rotated -90deg so the stroke starts at the top
  • .cngx-progress__circle-track - background ring stroke
  • .cngx-progress__circle-fill - active arc (stroke-dashoffset bound to value)
  • .cngx-progress__label - trailing label (linear) or absolutely- positioned center label (circular)

The cngx-progress-spin keyframe rotates 270deg (not 360deg) and is renamed from the original cngx-spin to avoid a global- keyframe collision with loading-indicator.css under encapsulation: None.

Index#

Layout

--cngx-progress-label-gap--cngx-progress-height--cngx-progress-border-radius--cngx-progress-circle-size

Surface

--cngx-progress-track-color--cngx-progress-color

Motion

--cngx-progress-transition-duration--cngx-progress-transition-easing--cngx-progress-indeterminate-duration--cngx-progress-indeterminate-easing

Typography

--cngx-progress-label-size--cngx-progress-label-color--cngx-progress-circle-label-size

Layout

--cngx-progress-label-gap#<length>
Default value 8px

Gap between the progress track and the trailing label slot.

--cngx-progress-height#<length>
Default value 4px

Height of the linear track.

--cngx-progress-border-radius#<length>
Default value 2px

Corner radius of the linear track.

--cngx-progress-circle-size#<length>
Default value 48px

Diameter of the circular ring variant.

Surface

--cngx-progress-track-color#<color>
Default value oklch(0 0 0 / 0.1)

Track color (the unfilled portion).

--cngx-progress-color#*
Default value currentColor

Fill color of the progress indicator.

Motion

--cngx-progress-transition-duration#<time>
Default value 300ms

Duration of the width / dashoffset transition for the determinate fill.

--cngx-progress-transition-easing#*
Default value ease-out

Easing curve of the determinate transition.

--cngx-progress-indeterminate-duration#<time>
Default value 1.5s

Duration of the indeterminate animation sweep.

--cngx-progress-indeterminate-easing#*
Default value ease-in-out

Easing curve of the indeterminate animation.

Typography

--cngx-progress-label-size#*
Default value 0.75rem

Font-size of the linear-variant label.

--cngx-progress-label-color#*
Default value currentColor

Color of the label slot.

--cngx-progress-circle-label-size#*
Default value 0.625rem

Font-size of the circular-variant centered label.

Enter to selectArrow Down Arrow Up to navigateEsc to close