Component/Trace

A dash tracing the outline of a rounded square.

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

Size

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

import { Trace } from "loading-dev"; export function TraceSize() {  return (    <div className="flex items-center gap-6">      <Trace size={16} />      <Trace size={24} />      <Trace 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 { Trace } from "loading-dev"; export function TraceClassName() {  return <Trace 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 { Trace } from "loading-dev"; export function TraceColor() {  return <Trace color="#f97316" size={32} />;}

Duration

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

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

State

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

import { Trace } from "loading-dev"; export function TracePlayState() {  return <Trace 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 { Trace } from "loading-dev"; export function TraceEasing() {  return (    <div className="flex items-center gap-6">      <Trace easing="linear" size={32} />      <Trace easing="ease-in-out" size={32} />      <Trace easing="stacked" size={32} />    </div>  );}

Cap

Controls how the ends of the stroke are drawn. round finishes them with a half circle, flat cuts them square. The default cap is round.

import { Trace } from "loading-dev"; export function TraceCap() {  return (    <div className="flex items-center gap-6">      <Trace cap="round" size={32} />      <Trace cap="flat" size={32} />    </div>  );}