Implementation:TobikoData Sqlmesh Spinner
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Components |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
An animated SVG spinner component with variant-based theming for loading states.
Description
Spinner is a React component that renders an animated circular loading indicator using SVG graphics. The component implements a two-path design with a static background ring and a colored rotating arc segment. The animation is achieved through CSS classes (animate-spin) that continuously rotate the SVG. The component supports six semantic variants (Primary, Secondary, Success, Warning, Danger, Info) that determine the color of the animated arc, with colors defined using CSS custom properties for consistent theming. The spinner includes proper ARIA attributes (role="img" and aria-label="Loading") for accessibility.
Usage
Use this component to indicate loading or processing states in the UI. The spinner is typically embedded within buttons, loading overlays, or status indicators. Choose the variant to match the context of the operation (e.g., Danger for destructive operations, Success for completed stages).
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/client/src/library/components/logo/Spinner.tsx
Signature
interface PropsSpinner extends React.SVGAttributes<SVGAElement> {
variant?: Variant
}
export default function Spinner({
style,
className,
variant = EnumVariant.Info,
}: PropsSpinner): JSX.Element
Import
import Spinner from '@components/logo/Spinner'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| variant | Variant | No | Semantic variant affecting the spinner color (defaults to Info) |
| style | React.CSSProperties | No | Inline CSS styles to apply to the SVG element |
| className | string | No | Additional CSS classes for sizing and positioning |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | React component | Animated SVG spinner with semantic color theming |
Usage Examples
import Spinner from '@components/logo/Spinner'
import { EnumVariant } from '~/types/enum'
// Default info spinner
<Spinner className="w-6 h-6" />
// Primary variant with custom size
<Spinner
variant={EnumVariant.Primary}
className="w-8 h-8"
/>
// Danger spinner for destructive operations
<Spinner
variant={EnumVariant.Danger}
className="w-4 h-4 mr-2"
/>