Component/Clock

A clock hand sweeping around a faint face.

import { Clock } from "loading-dev";
 
export function ClockDemo() {
  return <Clock size={48} />;
}

Size

Sets the spinner’s dimensions in pixels. The default value is 20

import { Clock } from "loading-dev";
 
export default function ClockSize() {
  return (
    <div className="flex items-center gap-6">
      <Clock size={16} />
      <Clock size={24} />
      <Clock size={40} />
    </div>
  );
}

Custom Classes

You can use a custom className in case you need to tweak the spinner in a specific way that the library doesn’t provide.

import { Clock } from "loading-dev";
 
export default function ClockClassName() {
  return <Clock className="opacity-40" size={32} />;
}

Color

The loader inherits currentColor from the parent by default. You can tint it in any way you want. It accepts any valid CSS color.

import { Clock } from "loading-dev";
 
export default function ClockColor() {
  return <Clock color="#f97316" size={32} />;
}

Duration

Sets the speed in ms. Higher values are slower, smaller values are faster.

import { Clock } from "loading-dev";
 
export default function ClockDuration() {
  return <Clock duration={2400} size={32} />;
}

State

Pauses or resumes the animation and exposes the state of the spinner.

import { Clock } from "loading-dev";
 
export default function ClockPlayState() {
  return <Clock playState="paused" size={32} />;
}

Easing

Controls how the spinner rotates. linear moves at a constant speed, ease-in-out starts slowly, speeds up, then slows down.stacked combines the two so it changes speed without stopping. The default easing is linear.

import { Clock } from "loading-dev";
 
export default function ClockEasing() {
  return (
    <div className="flex items-center gap-6">
      <Clock easing="linear" size={32} />
      <Clock easing="ease-in-out" size={32} />
      <Clock easing="stacked" size={32} />
    </div>
  );
}