Basic
Use a status spinner when the loading indicator is the only announcement for an in-progress region.
Icons
Icons by @ng-icons/tabler-icons
The component library does not provide icons.
Component Blueprint
Spinner
Portable loading indicator primitive with accessible status, decorative mode, size presets, token styling, and composition examples.
02 Usage
TS
import { FrSpinnerModule } from '@frame-ui-ng/components/spinner';HTML
<span frSpinner label="Loading project data"></span>03 Examples
Sizes
Use size presets for common inline, control, and empty-state loading treatments. `sizeValue` can still override the exact CSS size.
xs
sm
md
lg
xl
Inside Button
Place Spinner in the button loading slot when you want the shared spinner token contract instead of a one-off indicator.
Inside Badge
Badge spinners compose the same primitive, so badge loading states inherit the shared spinner inputs and tokens.
SyncingQueued
Inside Input Group
Use a decorative spinner in trailing input-group content when a field is checking, searching, or validating in the background.
Inside Empty
Spinner can sit in the media slot of an empty state when content is still being prepared rather than truly missing.
Preparing the workspace
A few project details are still being assembled.
RTL
The spinner itself is direction-neutral and composes naturally with right-to-left labels and surrounding layouts.
جار تحضير البيانات
04 Custom Styling
Override spinner tokens directly on the element or on a local wrapper when a loading state needs a stronger product-specific treatment.
05 Token Inspector
Hover the spinner or supporting label to inspect the tokens that control loading size, stroke, color, radius, and motion.
Loading previewHover the spinner to inspect size, stroke, colors, radius, and timing.
06 Design Tokens
Use these CSS custom properties to tune spinner dimensions, stroke width, track and indicator color, radius, and animation speed across every component that composes Spinner.
SCSS
--frame-spinner-size: 1rem;
--frame-spinner-stroke: 2px;
--frame-spinner-track-color: color-mix(in srgb, currentColor 24%, transparent);
--frame-spinner-indicator-color: currentColor;
--frame-spinner-radius: var(--frame-radius-full);
--frame-spinner-duration: 700ms;