ComponentsSpinner
Spinner
stableAnimated terminal spinner with named presets and customizable frames.
Browser preview is a simulation. The copied component runs in actual terminal apps.
spinner.tsx
⠋Loading…◐Processing▁Building
spinner.tsx
Installation
npx orizen-tui@latest add spinner
if dependency install fails, run: npm install ink@^5.0.1 react@^18.3.1 @types/react@^18.3.18 orizen-tui-core@latest
- Copy and paste the following code into your project.
- Update import paths to match your project setup.
components/ui/orizen/spinner.tsx
Usage
spinner.imports.tsx
spinner.example.tsx
Examples
Presets
spinner.example1.tsx
⠋Loading…◐Processing▁Building
spinner.example1.tsx
Custom Frames
spinner.example2.tsx
🌐Rotating
spinner.example2.tsx
Slow Interval
spinner.example3.tsx
⠋Take your time...
spinner.example3.tsx
API Reference
Spinner
PropTypeDefaultDescription
labelstringundefinedText shown after the spinner frame
labelundefined
stringText shown after the spinner frame
preset"dots" | "circle" | "bar"undefinedNamed spinner style for common presets
presetundefined
"dots" | "circle" | "bar"Named spinner style for common presets
framesstring[]theme spinnerCustom animation frames (overrides preset/theme)
framestheme spinner
string[]Custom animation frames (overrides preset/theme)
intervalMsnumber80Frame advance interval in ms
intervalMs80
numberFrame advance interval in ms