Component/Blocks

Nine blocks shrinking and growing in a sweep across a grid.

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

Size

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

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

Duration

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

import { Blocks } from "loading-dev"; export function BlocksDuration() {  return <Blocks duration={2600} size={32} />;}

State

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

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

Sweep

Controls which way the sweep runs. diagonal goes from the top left corner to the bottom right, rows from top to bottom, columns from left to right. The default sweep is diagonal.

import { Blocks } from "loading-dev"; export function BlocksSweep() {  return (    <div className="flex items-center gap-6">      <Blocks size={32} sweep="diagonal" />      <Blocks size={32} sweep="rows" />      <Blocks size={32} sweep="columns" />    </div>  );}