Fade arc

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

export function FadeArcDemo() {

Installation

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

Usage

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

Copy<FadeArc />

Customization

FadeArc is an SVG made from two gradient-filled arc segments. The leading edge stays solid while the tail fades out, which gives you a softer motion read than a flat stroke spinner. Most tuning happens through size, color, timing, and spin direction.

Size

Use size-* on the SVG root for inline controls, badges, and larger empty-state placements.

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

export function FadeArcSize() {

Color

Both gradients use currentColor, so text and foreground utilities tint the arc and its fade in one step.

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

export function FadeArcColor() {

Duration

Set --duration when the loader should feel quick and responsive or slower and more backgrounded.

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

export function FadeArcDuration() {

Direction

Reverse the spin when you want the motion to match nearby controls or other rotating elements.

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

export function FadeArcDirection() {

Examples

These examples show where the softer gradient tail tends to fit best: sync work, panel refreshes, and assistant-style surfaces where the loader should feel present but not sharp.

Button

In buttons, FadeArc reads clearly at small sizes without the harsh contrast of a single solid stroke.

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

Badge

Compact status pills benefit from the tapered tail because the motion stays visible even at size-3.5.

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

Alert

For non-blocking background jobs, the fade keeps the alert calm while still showing active progress.

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

Input group

A textarea footer is a natural place to show generation or preview work tied to the prompt above.

import {
  InputGroup,
  InputGroupAddon,

Tabs

Use it inside tab content when one panel is refreshing but the broader workspace stays interactive.

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