Spinner
A thin wrapper around the Angular Material progress spinner. Provides a simple way to customize size, color, and stroke width, with an optional Bootstrap spinner fallback.
Overview
Examples
Overview
Import SpinnerComponent and drop the <spinner> element into any standalone component. By default bootstrapSpinner is true, which renders a Bootstrap spinner (requires Bootstrap CSS). Set bootstrapSpinner to false to render the Angular Material mat-spinner instead, then tune it with diameter, color, and strokeWidth.
- Tree-shakable: only the imported features are included in your bundle.
- Fully configurable for size, color, and stroke width.
- Follows Angular Material and WCAG accessibility best practices with semantic markup and ARIA attributes.
API
Selectors
spinner, lib-spinner
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
bootstrapSpinner | boolean | true | Use the Bootstrap spinner when true, otherwise the Angular Material spinner |
diameter | number | 50 | Diameter of the Material spinner (px) |
color | ThemePalette | 'primary' | Color of the Material spinner ('primary', 'accent', 'warn') |
strokeWidth | number | 5 | Stroke width of the Material spinner |
Set bootstrapSpinner to false to use the Angular Material spinner. The Bootstrap variant requires Bootstrap CSS to be present in your application.