Toolbar
Beta

Spinner

The FktSpinner component provides a customizable loading indicator with configurable size, stroke width, and color themes. It's designed to give users visual feedback during loading states and async operations.

Import

import {FktSpinnerComponent} from "frakton-ng/spinner";

Size variations

Spinners with different sizes for various use cases and container sizes.

Large (72px)

Medium (48px)

Small (24px)

Color themes

Spinners showcasing different color themes for various semantic meanings.

Primary

Accent

Info

Success

Warning

Danger

Loading state

Spinner used in a typical loading state scenario with conditional display.

@if (isLoading()) {
Loading data...
} @else {
Data loaded successfully!
}

Custom configuration

Spinner with dynamic configuration based on different states or conditions.

Thick stroke (8px)

Thin stroke (2px)

Spinner

Key Features

  • Configurable Size: Adjustable spinner diameter
  • Stroke Width Control: Customizable border thickness
  • Color Themes: Multiple predefined color options
  • CSS Custom Properties: Uses modern CSS variables for styling
  • Lightweight: Minimal DOM structure with pure CSS animation
  • Responsive: Scales appropriately in different containers
  • Accessibility: Screen reader friendly loading indicator
  • Performance: Hardware-accelerated CSS animations

Configuration Options

FktColor Type

type FktColor = 'primary' | 'yellow' | 'red' | 'green';

Use Cases

Perfect for loading states, button loading indicators, table loading overlays, search results, file uploads, and any async operation requiring user feedback. Ideal for integration with HTTP interceptors and form validation.

Accessibility

  • ARIA Labels: Can be enhanced with loading announcements
  • Screen Reader Support: Semantic loading indication
  • Reduced Motion: Respects user's motion preferences
  • Focus Management: Does not interfere with focus flow

Performance

  • CSS Animations: Uses hardware-accelerated CSS transforms
  • No JavaScript Animation: Pure CSS for better performance
  • Lightweight DOM: Minimal HTML structure
  • Memory Efficient: No complex state or subscriptions