Arc

import { Arc } from "@/components/loading-ui/arc";

export function ArcDemo() {

Installation

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

Usage

Copyimport { Arc } from "@/components/loading-ui/arc";

Copy<Arc />

Customization

Arc has a bit more visual weight than the lighter segmented spinners, so it works best when you want the loading state to feel deliberate and easy to spot. Since it is just a rotating bordered circle, the most useful adjustments come from size, color, border thickness, and timing.

Size

Scale the loader up or down with size-* utilities depending on whether it sits inline or anchors a larger empty state.

import { Arc } from "@/components/loading-ui/arc";

export function ArcSize() {

Color

Arc inherits currentColor, which makes it easy to align with brand accents, muted UI, or context-specific status colors.

import { Arc } from "@/components/loading-ui/arc";

export function ArcColor() {

Border Width

Changing the border thickness noticeably shifts the feel of the component, especially at medium and larger sizes.

import { Arc } from "@/components/loading-ui/arc";

export function ArcBorderWidth() {

Duration

Set --duration when the loader should feel calm and backgrounded versus urgent and active.

import { Arc } from "@/components/loading-ui/arc";

export function ArcDuration() {

Examples

These examples showcase the settings where Arc tends to read best: framed UI, more prominent surfaces, and states where the loader should feel a little more substantial than a minimal inline spinner.

Button

Inside buttons, Arc works well when you want the action state to feel a bit more deliberate than a tiny inline indicator.

import { Button } from "@/components/ui/button";
import { Arc } from "@/components/loading-ui/arc";

Badge

With a thinner border, Arc also fits nicely inside compact status pills for syncing and refresh states.

import { Badge } from "@/components/ui/badge";
import { Arc } from "@/components/loading-ui/arc";

Empty

For section-level waiting states, the curved shape gives enough presence to anchor the empty state without needing extra ornament.

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

Tabs

Use Arc inside tab content when a single panel is refreshing but the broader workspace remains interactive.

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Arc } from "@/components/loading-ui/arc";