Concentric ring

import { ConcentricRing } from "@/components/loading-ui/concentric-ring";

export function ConcentricRingDemo() {

Installation

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

Usage

Copyimport { ConcentricRing } from "@/components/loading-ui/concentric-ring";

Copy<ConcentricRing />

Customization

ConcentricRing has a tighter, more technical feel than a plain ring spinner. The overall look comes from the relationship between the outer guide ring and the inner rotating segment, so the most useful adjustments are the ones that change weight, color, pace, and overall scale.

Size

Use size-* utilities to move the loader between compact inline states and more prominent framed layouts.

import { ConcentricRing } from "@/components/loading-ui/concentric-ring";

export function ConcentricRingSize() {

Color

Both rings use currentColor, so the component can inherit tone from its parent or be styled directly with text color utilities.

import { ConcentricRing } from "@/components/loading-ui/concentric-ring";

export function ConcentricRingColor() {

Ring Weight

Changing the border thickness shifts the component from delicate and precise to more assertive and mechanical.

import { ConcentricRing } from "@/components/loading-ui/concentric-ring";

export function ConcentricRingRingWeight() {

Duration

Animation timing helps determine whether the loader feels calm and backgrounded or more active and urgent.

import { ConcentricRing } from "@/components/loading-ui/concentric-ring";

export function ConcentricRingDuration() {

Examples

These examples focus on compact, structured UI where ConcentricRing feels particularly at home. It tends to work best in technical or dashboard-like contexts where the extra ring detail reads as intentional rather than decorative.

Button

Inside buttons, ConcentricRing gives the pending state a slightly more engineered feel than a basic spinner.

import { Button } from "@/components/ui/button";
import { ConcentricRing } from "@/components/loading-ui/concentric-ring";

Badge

In small status pills, the layered shape still reads clearly without becoming too heavy.

import { Badge } from "@/components/ui/badge";
import { ConcentricRing } from "@/components/loading-ui/concentric-ring";

Collapsible

Within a collapsible task panel, it helps anchor a processing summary while deeper details remain visible below.

import { ChevronsUpDownIcon } from "lucide-react";

import {

Alert

For visible but non-blocking activity, ConcentricRing makes a strong alert marker without overpowering the surrounding copy.

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