Clock ring

import { ClockRing } from "@/components/loading-ui/clock-ring";

export function ClockRingDemo() {

Installation

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

Usage

Copyimport { ClockRing } from "@/components/loading-ui/clock-ring";

Copy<ClockRing />

Customization

ClockRing keeps a full-strength guide ring with a single radial “hand,” so it naturally reads as time, calendars, and scheduling more than generic activity. Keep copy and placement aligned with that metaphor and it will feel intentional.

Size

Match scale to the control or banner it sits beside so the hand stays visually balanced.

import { ClockRing } from "@/components/loading-ui/clock-ring";

export function ClockRingSize() {

Color

Pair semantic hues (for example warm tones for calendar sync) with theme-aware dark: variants when you need extra clarity.

import { ClockRing } from "@/components/loading-ui/clock-ring";

export function ClockRingColor() {

Ring weight

A heavier ring feels more like instrumentation; a lighter ring stays polite in forms and tables.

import { ClockRing } from "@/components/loading-ui/clock-ring";

export function ClockRingRingWeight() {

Duration

Slower rotations feel like background reconciliation; faster reads as a more immediate hold.

import { ClockRing } from "@/components/loading-ui/clock-ring";

export function ClockRingDuration() {

Examples

These examples emphasize timelines and inputs: alerts about sync lag, fields that resolve time zones, and lightweight popovers for maintenance context.

Button

Use it when the action is explicitly waiting on a scheduler or clock-driven backend.

import { Button } from "@/components/ui/button";
import { ClockRing } from "@/components/loading-ui/clock-ring";

Alert

A dashed alert frame and warm accent color reinforce that the delay is temporal, not a hard failure.

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

Input group

Localize feedback to the control when only one column is still resolving.

import {
  InputGroup,
  InputGroupAddon,

Popover

Popover content is ideal for short policy copy where the loader anchors a paragraph of explanation.

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