Dots ring

import { DotsRing } from "@/components/loading-ui/dots-ring";

export function DotsRingDemo() {

Installation

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

Usage

Copyimport { DotsRing } from "@/components/loading-ui/dots-ring";

Copy<DotsRing />

Customization

DotsRing is more configurable than most of the simpler spinners in the set. Since the component exposes props for dot count, dot size, and ring radius, and uses --duration for pulse timing, it is a good fit when you want to tune the motion itself instead of only swapping utility classes around it.

Size

Use size-* utilities to control the overall footprint of the ring in compact and larger layouts.

import { DotsRing } from "@/components/loading-ui/dots-ring";

export function DotsRingSize() {

Dot Count

Increase or decrease the number of dots to make the motion feel denser or more minimal.

import { DotsRing } from "@/components/loading-ui/dots-ring";

export function DotsRingDots() {

Duration

Set --duration to adjust how quickly the pulse travels around the ring.

import { DotsRing } from "@/components/loading-ui/dots-ring";

export function DotsRingDuration() {

Dot Scale

Use dotScale to change the size of each dot relative to the overall ring.

import { DotsRing } from "@/components/loading-ui/dots-ring";

export function DotsRingDotScale() {

Radius Scale

The radiusScale prop controls how far the dots sit from the center, which changes how tight or airy the ring feels.

import { DotsRing } from "@/components/loading-ui/dots-ring";

export function DotsRingRadiusScale() {

Examples

These examples focus on smaller, more interface-oriented contexts where DotsRing feels precise and a little more designed than a plain spinner, without becoming overly expressive.

Badge

In compact status pills, DotsRing gives you a more distinctive loading marker while still reading clearly at small sizes.

import { Badge } from "@/components/ui/badge";
import { DotsRing } from "@/components/loading-ui/dots-ring";

Input Group

Inside input groups, it works well for inline checking and drafting states where the feedback should stay close to the field.

import {
  InputGroup,
  InputGroupAddon,

Alert

For visible but non-blocking system activity, DotsRing makes a good alert icon when you want something more refined than a single stroke spinner.

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

Tabs

Within tabbed views, it can signal that one panel is still refreshing while the rest of the workspace remains available.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { DotsRing } from "@/components/loading-ui/dots-ring";