Spinner

A customizable iOS-styled spinner with zero dependencies.

Live Examples

Features

• Zero dependencies.
• Can change the number of segments from 8 to 12.
• Fully customizable (size, color, animation duration, etc.)
• Supports responsive sizes via CSS media queries.

Requirements

• react >= 18.0.0

Installation

npm install @blur-ui/spinner

or

yarn add @blur-ui/spinner

Usage

<Spinner size='1.5rem' segmentClassName='bg-white' />

or

// Supports responsive sizes via CSS media queries
<Spinner className='h-10 w-10 lg:h-20 lg:w-20' segmentClassName='bg-white' />

Props

• size (string)

  The size of the spinner (e.g., '1rem', '16px'). If not provided, you can define width and height in the classNames.

  Default: undefined

• segments (SpinnerSegmentsCount)

  The number of segments in the spinner. Acceptable values are 8, 9, 10, 11, or 12.

  Default: 10

• segmentClassName (string)

  The classNames for the spinner segments.

• animationDuration (number)

  The animation duration for the spinner.

  Default: 1.2