Spinner is a ui element to show the loading state.
Default Spinner example below.
Use size="" and define size with supported "sm", "md", "lg", "xl" sizes.
Use color="" attribute to define spinner color. Supported colors are "primary", "success", "danger", "warning", "accent" and "inverted" if it is used on dark background.
Use <base-spinner-wrapper></base-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.
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.
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.
Run the following command to add this component to your project:
npx base-ui-cli add spinner
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-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 | Member | Type | Default | Description |
|---|---|---|---|---|
base-spinner | size | SpinnerSize | 'md' | The diameter/thickness of the loading spinner. Defaults to 'md'. |
base-spinner | color | SpinnerColor | 'primary' | The semantic color variant. Use 'inverted' for white spinners on dark backgrounds. |
base-spinner-wrapper | backdrop | 'dark' | 'light' | 'light' | Backdrop color: `dark` renders a dark overlay, `light` (the default) a light one. |
Content