Dual arc

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

export function DualArcDemo() {

Installation

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

Usage

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

Copy<DualArc />

Customization

DualArc sits in a useful middle ground: more distinctive than a plain spinner, but still restrained enough for everyday product UI. Since the shape comes from borders and rotation, the most helpful changes are size, color, thickness, and pacing.

Size

Scale the component with size-* utilities depending on whether it appears inline or anchors a slightly larger state.

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

export function DualArcSize() {

Color

Because the arcs use currentColor, they can easily inherit tone from the surrounding surface or be styled directly with text color utilities.

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

export function DualArcColor() {

Border Width

Border thickness changes how assertive the arcs feel, especially when you use the loader at medium or large sizes.

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

export function DualArcBorderWidth() {

Duration

Set --duration to make the component read as either calm background activity or more active in-progress feedback.

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

export function DualArcDuration() {

Examples

These examples show where DualArc usually fits best: balanced interface patterns that need a clearer loading signal than the lightest spinners, but not the visual intensity of the more expressive variants.

Badge

In small status pills, DualArc stays readable while giving the label a bit more structure than a single stroke spinner.

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

Input Group

Inside inputs and message composers, it helps communicate checking, drafting, or sending states without breaking the local flow.

import {
  InputGroup,
  InputGroupAddon,

Alert

For visible but non-blocking background work, DualArc gives alerts a stable activity marker that still feels refined.

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

Tabs

Within tabbed workspaces, it can indicate a panel-level refresh while the broader interface stays interactive.

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