Quarter ring

import { QuarterRing } from "@/components/loading-ui/quarter-ring";

export function QuarterRingDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/quarter-ring
Copy

Usage

Copyimport { QuarterRing } from "@/components/loading-ui/quarter-ring";

Copy<QuarterRing />

Customization

QuarterRing only paints the top-right quadrant of a ring, so it stays visually lighter than a full stroke while still reading clearly at small sizes. It fits inline labels, dense toolbars, and “quick pass” states.

Size

Step through size-* utilities to match chips, table rows, and icon slots.

import { QuarterRing } from "@/components/loading-ui/quarter-ring";

export function QuarterRingSize() {

Color

The arc uses currentColor, so inheritance and semantic text colors apply without extra props.

import { QuarterRing } from "@/components/loading-ui/quarter-ring";

export function QuarterRingColor() {

Ring weight

Border thickness changes how punchy the arc feels against whitespace—especially next to monospace or tabular data.

import { QuarterRing } from "@/components/loading-ui/quarter-ring";

export function QuarterRingRingWeight() {

Duration

Set --duration to slow the rotation for background tasks or speed it up for snappy micro-interactions.

import { QuarterRing } from "@/components/loading-ui/quarter-ring";

export function QuarterRingDuration() {

Examples

These examples highlight small-footprint feedback: pills, empty states, and hover tips where a full ring would feel crowded.

Button

The quarter arc keeps button height comfortable while the label carries most of the meaning.

import { Button } from "@/components/ui/button";
import { QuarterRing } from "@/components/loading-ui/quarter-ring";

Badge

Badges stay balanced because the spinner silhouette matches the height of adjacent text.

import { Badge } from "@/components/ui/badge";
import { QuarterRing } from "@/components/loading-ui/quarter-ring";

Empty

For “lightweight preview” empty states, the arc suggests work in progress without dominating the illustration slot.

import { Button } from "@/components/ui/button";
import {
  Empty,

Tooltip

Pair the loader with short explanatory copy when the delay is user-visible but not worth a modal.

import { Button } from "@/components/ui/button";
import {
  Tooltip,