Spinner

The Spinner component provides a Windows 98-style loading indicator that shows when content is being loaded or a process is running.

Import

import { Spinner } from 'rohit-ui';

Examples

Basic Spinner

// Basic spinner
<Spinner />

Spinner with Custom Size

// Spinner with custom size and color
<Spinner 
  size="large"
  color="#ff0000"
/>

Rohit Mode Spinner

// Rohit Mode spinner
<Spinner 
  size="large"
  rohitMode
/>

Note: In Rohit Mode, the spinner will wiggle, change color, and sometimes spin in the wrong direction.

Props

Name	Type	Default	Description
size	'small' \| 'medium' \| 'large'	'medium'	Size of the spinner
color	string	var(--win98-navy)	Color of the spinner
speed	number	1	Speed of the spinner animation in seconds
className	string	-	CSS class to apply to the spinner
rohitMode	boolean	false	Enables Rohit Mode with silly animations and behaviors

CSS Customization

You can customize the Spinner component using styled-components:

import styled from 'styled-components';
import { Spinner } from 'rohit-ui';

const CustomSpinner = styled(Spinner)`
  border-width: 4px;
  border-style: dashed;
  animation: spin 2s linear infinite, rainbow 3s linear infinite;
  
  @keyframes rainbow {
    0% { border-color: red; }
    33% { border-color: green; }
    66% { border-color: blue; }
    100% { border-color: red; }
  }
`;

function MyComponent() {
  return <CustomSpinner />;
}

Rohit Mode Behavior

When Rohit Mode is enabled, the Spinner component will:

Wiggle or bounce while spinning
Change color periodically
Sometimes spin in the wrong direction
Occasionally stop and start spinning randomly
Draw unnecessary attention to itself