Component
Spinner
Loading indicator for async operations. Use when content is being loaded.
tsx
import { Spinner, LoadingOverlay, WebbaLoader } from 'wss3-forge'Usage
•
Use for short loading states
•
Add label for context on longer operations
•
LoadingOverlay for full container loading
•
WebbaLoader for branded loading animation
Loading...
Examples
Sizes
tsx
1<HStack gap="lg" align="center">2 <Spinner size="xs" />3 <Spinner size="sm" />4 <Spinner size="md" />5 <Spinner size="lg" />6</HStack>With Label
Loading...Processing your request...
tsx
1<VStack gap="lg">2 <Spinner size="md" label="Loading..." />3 <Spinner size="lg" label="Processing your request..." />4</VStack>Custom Colors
tsx
1<HStack gap="lg" align="center">2 <Spinner color="var(--color-success)" />3 <Spinner color="var(--color-error)" />4 <Spinner color="var(--color-warning)" />5</HStack>WebbaLoader
tsx
1<HStack gap="xl" align="center">2 <WebbaLoader size={32} />3 <WebbaLoader size={48} />4 <WebbaLoader size={64} />5</HStack>WebbaLoader Colors
tsx
1<HStack gap="xl" align="center">2 <WebbaLoader size={40} color="var(--brand-primary)" />3 <WebbaLoader size={40} color="var(--color-success)" />4 <WebbaLoader size={40} color="var(--color-error)" />5</HStack>Previous
Skeleton
Next
SplashScreen
Last updated: December 2025