Spin

A loading spinner component.

Basic Usage

Sample Content

This content is wrapped inside the prism-spin component. When the spinning input is true, the content becomes blurred and an overlay with a loader is shown.

<prism-spin [spinning]="isSpinning()">
  <div style="padding: 30px; border: 1px solid #eee;">
    This content will be blurred when spinning is true.
  </div>
</prism-spin>

Sizes

<prism-spin simple size="sm"></prism-spin>
<prism-spin simple size="md"></prism-spin>
<prism-spin simple size="lg"></prism-spin>

Customized Description (Tip)

Add a descriptive loading text below the spinner.

User Profile

Information is being loaded...

Loading user data...

<prism-spin tip="Loading user data..." [spinning]="true">
  <div class="p-8 border border-gray-100 rounded bg-white">
    Spinner with a custom loading message underneath.
  </div>
</prism-spin>

Custom Indicator

Use your own loading indicator or icon instead of the default circular spinner.

Syncing Data

We are syncing your latest changes to the cloud.

<ng-template #customIndicator>
  <i class="ri-loader-4-line text-3xl animate-spin text-indigo-600"></i>
</ng-template>
<prism-spin [indicator]="customIndicator" [spinning]="true">
  <div class="p-8 border border-gray-100 rounded bg-white">
    Custom icon indicator.
  </div>
</prism-spin>

Delayed Loading

For very fast requests, showing a loading state might cause flickering. Use delay to only show the spinner if the request takes longer than the specified time (e.g. 500ms).

Fast Operation

Toggle the state quickly to simulate a fast network response. If toggled off before 500ms, the spinner will never appear.

<button (click)="isDelayedSpinning.set(!isDelayedSpinning())">Toggle Spinning (500ms Delay)</button>
<prism-spin [spinning]="isDelayedSpinning()" [delay]="500">
  <div class="p-8 border border-gray-100 rounded bg-white">
    Delayed spinner content (500ms). If the loading is fast enough, the spinner will not appear to prevent flashing.
  </div>
</prism-spin>

APINameTypeDefaultDescription
spinningbooleantrueWhether to show the spinner
simplebooleanfalseWhether the spin is standalone (no wrapper)
size'sm' | 'md' | 'lg''md'Size of the spinner
tipstring''Optional text to show below the spinner.
delaynumber0Delay in ms before showing spinner (prevents flickering for fast loads)
indicatorTemplateRef<any>-Custom loading indicator template.

Name	Type	Default	Description
`spinning`	`boolean`	`true`	Whether to show the spinner
`simple`	`boolean`	`false`	Whether the spin is standalone (no wrapper)
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the spinner
`tip`	`string`	`''`	Optional text to show below the spinner.
`delay`	`number`	`0`	Delay in ms before showing spinner (prevents flickering for fast loads)
`indicator`	`TemplateRef<any>`	`-`	Custom loading indicator template.