Spinner

Showcase

React

import { Spinner, SpinnerTrack, SpinnerThumb } from '@klnjs/react-spinner'
import classes from './spinner.module.css'

export default () => (
  <Spinner className={classes.spinner}>
    <SpinnerTrack className={classes.track} />
    <SpinnerThumb className={classes.thumb} />
  </Spinner>
)

Styles

.spinner {
  display: block;
}

.thumb {
  color: var(--sl-color-accent-high);
}

.track {
  color: var(--sl-color-black);
}

Features

• Configurable dimensions and duration.

• Custom easing function.

Installation

bun install @klnjs/react-spinner

Components

• Spinner
• SpinnerTrack
• SpinnerThumb

Spinner

Contains all the parts of an spinner. Use the size to determine the overall size of the spinner and the width to determine the thickness of the track and thumbs.

Prop	Type	Default
asChild	boolean	false
size	number	24
width	number	4

Track

Used to optionally render a track. It will automatically calculate its dimensions based on the size and width property of the spinner.

Prop	Type	Default
asChild	boolean	false

Thumb

Used to render a thumb. It will automatically calculate its dimensions based on the size and width property of the spinner. It is possible to render multiple thumbs, and have them perform different animations based on the properties given.

Use the props angle and arc to determine the starting angle and the arc of the thumb. The cap prop determines the shape of the thumb’s cap. The duration prop determines the duration of the animation. The easing prop determines the easing function of the animation.

Prop	Type	Default
asChild	boolean	false
angle	number	0
arc	number	25
cap	'butt' | 'round' | 'square'	round
duration	number	1
easing	string	-