Infinity Track

InfinityTrack combines a static unicode infinity track with staggered moving block masks. It is the tracked counterpart to InfinitySquareSnake.

import { InfinityTrack } from "@/components/loading-ui/infinity-track";

export function InfinityTrackDemo() {

Credits to shaah1d for creating the initial animation.

Installation

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

Usage

Copyimport { InfinityTrack } from "@/components/loading-ui/infinity-track";

Copy<InfinityTrack />

Customization

Use blocks and track for unicode glyphs. The path scales with text size, and --duration, --delay, and --mask-color control motion and surface matching.

Size

Scale the tracked infinity path with text-size utilities.

import { InfinityTrack } from "@/components/loading-ui/infinity-track";

export function InfinityTrackSize() {

Color

The track and moving glyphs inherit text color.

import { InfinityTrack } from "@/components/loading-ui/infinity-track";

export function InfinityTrackColor() {

Duration

Set --duration to tune the infinity loop.

import { InfinityTrack } from "@/components/loading-ui/infinity-track";

export function InfinityTrackDuration() {

Glyphs

Swap glyphs and set --mask-color when the loader sits on a tinted surface.

import { InfinityTrack } from "@/components/loading-ui/infinity-track";

export function InfinityTrackGlyphs() {