Component/Ripple

Three rings spreading out from the center.

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

Size

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

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

Duration

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

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

State

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

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

Direction

Controls which way the motion travels. out spreads it from the center, in draws it into the center. The default direction is out.

import { Ripple } from "loading-dev"; export function RippleDirection() {  return (    <div className="flex items-center gap-6">      <Ripple direction="out" size={32} />      <Ripple direction="in" size={32} />    </div>  );}