# Loader Infinity Path — React Loader Component

> A comet of stroke dashes laps an SVG infinity loop, its tail built from stacked dashes that thin out behind the head.

- Category: [Loaders](https://pixelpapa.com/components/loaders.md)
- Tags: loader, infinity, svg, stroke, loading
- Dependencies: none (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/loaders/loader-infinity-path

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/loader-infinity-path
```

The file is written to `components/pixelpapa/loader-infinity-path.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/loaders/loader-infinity-path.

## AI prompt

```text
Add the "Loader Infinity Path" component from PixelPapa UI to this project.

What it is: A comet of stroke dashes laps an SVG infinity loop, its tail built from stacked dashes that thin out behind the head.
Category: Loaders. Depends on: no extra packages.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/loader-infinity-path
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/loader-infinity-path.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/loader-infinity-path.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/loader-infinity-path" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More loaders

- [Loader Bars Equalizer](https://pixelpapa.com/components/loaders/loader-bars-equalizer.md): Rounded bars bounce at different tempos like an audio meter; grows from the baseline or mirrors around the centre line.
- [Loader Morphing Shape](https://pixelpapa.com/components/loaders/loader-morphing-shape.md): A single shape turns a quarter at a time while its corners melt between square, circle, leaf and diamond, trailed by a lagging ghost.
- [Loader Orbit Dots](https://pixelpapa.com/components/loaders/loader-orbit-dots.md): Dots chase each other around a ring, bunching at the top and fanning out as they fall, around a softly pulsing core.
- [Loader Progress Ring Percent](https://pixelpapa.com/components/loaders/loader-progress-ring-percent.md) (Pro): A ring that springs to its value while the percentage counts along inside it, then swaps to a check mark when it reaches 100.
- [Loader Skeleton Card](https://pixelpapa.com/components/loaders/loader-skeleton-card.md) (Pro): Skeleton blocks for a card and a list, swept by one shared diagonal shimmer per surface so every block glints in sync.
- [Loader Stepped Progress](https://pixelpapa.com/components/loaders/loader-stepped-progress.md) (Pro): A multi-step progress track: connectors fill, the active step spins, finished steps pop a check, and the status line rolls to the next message.