@kit-ng-ui/spin

Loading spinner for Kit UI. Mirrors ant-design's <Spin>.

Install

pnpm add @kit-ng-ui/spin @kit-ng-ui/core

Styles

@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/spin/styles' as spin;

Use

import { KitSpinComponent } from '@kit-ng-ui/spin';

@Component({
  standalone: true,
  imports: [KitSpinComponent],
  template: `
    <!-- standalone indicator -->
    <kit-spin />
    <kit-spin size="large" />

    <!-- wrapper around content -->
    <kit-spin wrapper [spinning]="loading()" tip="Saving…">
      <article>...</article>
    </kit-spin>
  `,
})
export class Demo {}

API

| Input | Type | Default | Description | | ---------- | ------------------------------------- | ----------- | -------------------------------------------------------------------------- | | spinning | boolean | true | Whether the spinner is visible. | | size | 'sm' \| 'md' \| 'lg' | 'md' | Indicator size. | | tip | string | '' | Caption shown below the spinner in wrapper mode. | | delay | number (ms) | 0 | Defer showing the spinner; cleared if spinning flips back to false. | | wrapper | boolean | false | When true, projected children are dimmed under a centred spinner. |