Spinner

Spinner is a ui element to show the loading state.

free

Playground

size

color

HTML

<ply-spinner size="lg" color="primary">Spinner</ply-spinner>

Default Spinner

Default Spinner example below.

HTML

<ply-spinner></ply-spinner>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add spinner
// Paths are relative to aliases.components (default: src/app/components)
import { SpinnerWrapperComponent } from './spinner/spinner-wrapper/spinner-wrapper.component';
import { SpinnerComponent } from './spinner/spinner.component';

@Component({
  selector: 'app-spinner-example',
  imports: [
    SpinnerComponent,
    SpinnerWrapperComponent
  ],
  template: `...`
})
export class SpinnerExampleComponent {}

Install

bash

npx ply-ui-cli add spinner

Spinner Sizes

Use size="" and define size with supported "sm", "md", "lg", "xl" sizes.

HTML

<ply-spinner size="sm"></ply-spinner>
<ply-spinner size="md"></ply-spinner>
<ply-spinner></ply-spinner>
<ply-spinner size="lg"></ply-spinner>
<ply-spinner size="xl"></ply-spinner>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add spinner
// Paths are relative to aliases.components (default: src/app/components)
import { SpinnerWrapperComponent } from './spinner/spinner-wrapper/spinner-wrapper.component';
import { SpinnerComponent } from './spinner/spinner.component';

@Component({
  selector: 'app-spinner-example',
  imports: [
    SpinnerComponent,
    SpinnerWrapperComponent
  ],
  template: `...`
})
export class SpinnerExampleComponent {}

Install

bash

npx ply-ui-cli add spinner

Spinner Colors

Use color="" attribute to define spinner color. Supported colors are "primary", "success", "danger", "warning", "accent" and "inverted" if it is used on dark background.

HTML

<div class="flex gap-4 items-center justify-center mb-8">
  <ply-spinner color="primary"></ply-spinner>
  <ply-spinner color="success"></ply-spinner>
  <ply-spinner color="danger"></ply-spinner>
  <ply-spinner color="warning"></ply-spinner>
  <ply-spinner color="accent"></ply-spinner>
</div>
<div class="flex h-31.5 bg-slate-800 rounded-md">
  <ply-spinner color="inverted"></ply-spinner>
</div>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add spinner
// Paths are relative to aliases.components (default: src/app/components)
import { SpinnerWrapperComponent } from './spinner/spinner-wrapper/spinner-wrapper.component';
import { SpinnerComponent } from './spinner/spinner.component';

@Component({
  selector: 'app-spinner-example',
  imports: [
    SpinnerComponent,
    SpinnerWrapperComponent
  ],
  template: `...`
})
export class SpinnerExampleComponent {}

Install

bash

npx ply-ui-cli add spinner

Spinner Examples

Use <ply-spinner-wrapper></ply-spinner-wrapper> we can put on top of any content while loading the data. Only we need to add class namerelative to the parent element.

By default the backdrop bg is light. Use backdrop="dark" for dark backdrop background color.

Title of the card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mauris sit amet massa vitae. In vitae turpis massa sed elementum tempus egestas. Enim facilisis gravida neque convallis. Nam libero justo laoreet sit amet cursus sit amet. Diam sit amet nisl suscipit adipiscing. Sagittis orci a scelerisque purus semper eget.

Title of the card

HTML

<ply-card class="relative">
  <ply-card-header>Title of the card</ply-card-header>
  <ply-card-body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
      do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Mauris sit amet massa vitae. In vitae turpis massa sed
      elementum tempus egestas. Enim facilisis gravida neque
      convallis. Nam libero justo laoreet sit amet cursus sit amet.
      Diam sit amet nisl suscipit adipiscing. Sagittis orci a
      scelerisque purus semper eget.
    </p>
  </ply-card-body>
  <ply-spinner-wrapper>
    <ply-spinner></ply-spinner>
  </ply-spinner-wrapper>
</ply-card>
<br>
<ply-card class="relative">
  <ply-card-header>Title of the card</ply-card-header>
  <ply-card-body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
      do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Mauris sit amet massa vitae. In vitae turpis massa sed
      elementum tempus egestas. Enim facilisis gravida neque
      convallis. Nam libero justo laoreet sit amet cursus sit amet.
      Diam sit amet nisl suscipit adipiscing. Sagittis orci a
      scelerisque purus semper eget.
    </p>
  </ply-card-body>
  <ply-spinner-wrapper backdrop="dark">
    <ply-spinner color=""></ply-spinner>
  </ply-spinner-wrapper>
</ply-card>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add spinner
// Paths are relative to aliases.components (default: src/app/components)
import { SpinnerWrapperComponent } from './spinner/spinner-wrapper/spinner-wrapper.component';
import { SpinnerComponent } from './spinner/spinner.component';

@Component({
  selector: 'app-spinner-example',
  imports: [
    SpinnerComponent,
    SpinnerWrapperComponent
  ],
  template: `...`
})
export class SpinnerExampleComponent {}

Install

bash

npx ply-ui-cli add spinner

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add spinner

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add spinner
// Paths are relative to aliases.components (default: src/app/components)
import { SpinnerWrapperComponent } from './spinner/spinner-wrapper/spinner-wrapper.component';
import { SpinnerComponent } from './spinner/spinner.component';

@Component({
  selector: 'app-your-component',
  imports: [
    SpinnerComponent,
    SpinnerWrapperComponent
  ],
  template: `...`
})
export class YourComponent {}

API for spinner — generated from JSDoc in the library source.

API reference for spinner
API	Member	Type	Default	Description
`ply-spinner`	`size`	`SpinnerSize`	`'md'`	The diameter/thickness of the loading spinner. Defaults to 'md'.
`ply-spinner`	`color`	`SpinnerColor`	`'primary'`	The semantic color variant. Use 'inverted' for white spinners on dark backgrounds.
`ply-spinner-wrapper`	`backdrop`	`'dark' \| 'light'`	`'light'`	Backdrop color: `dark` renders a dark overlay, `light` (the default) a light one.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).