import { KbqProgressSpinnerModule } from '@koobiq/components/progress-spinner';Component that reports the progress of an ongoing operation.
@Component({ selector: 'kbq-progress-spinner' }) class KbqProgressSpinner extends KbqColorDirective { readonly id = input<string>( inject(_IdGenerator).getId('kbq-progress-spinner-') ); readonly value = input<number>(0); readonly mode = input<ProgressSpinnerMode>('determinate'); readonly size = input<ProgressSpinnerSize>('compact'); readonly color = input<T | null | undefined>(); get colorClassName(): string; setDefaultColor(color: T): void; }
idstring Unique id of the spinner.
valuenumber Progress of the operation, in percent. Clamped to [0, 100] and only rendered in determinate mode.
Anything that is not a number reads as 0: the value feeds a stroke-dashoffset percentage, and a
bare numberAttribute would turn a null binding into NaN%, which is not a length at all. The
transform is typed rather than taking unknown, so [value]="progress$ | async" and value="40"
keep type-checking while an object or an array stays a template type error.
modeProgressSpinnerMode Whether the spinner reports value or spins indefinitely.
sizeProgressSpinnerSize Size of the spinner.
colorT | null | undefined Color of the component. A value set in code holds until the input changes, and the default color is used while both are unset or falsy.
colorClassNamestring current class name of color
setDefaultColor()void this color will be used as a default value. For example [color]="'' | false | undefined | null".
Directive that marks the caption of a progress spinner.
@Directive({ selector: '[kbq-progress-spinner-caption]' }) class KbqProgressSpinnerCaption {}
Directive that marks the text of a progress spinner.
@Directive({ selector: '[kbq-progress-spinner-text]' }) class KbqProgressSpinnerText {}
Whether the spinner reports a known progress value or spins indefinitely.
type ProgressSpinnerMode = 'determinate' | 'indeterminate';Sizes supported by the progress spinner.
type ProgressSpinnerSize = Exclude<KbqDefaultSizes, 'normal'>;