Morphing Infinity

An animated SVG loader that morphs between a circle and an infinity symbol. It cycles through shapes continuously. Use for loading states or to indicate ongoing processes.

byTurboStarter from Loading UI

Installation

terminal

pnpm dlx layro-cli add @turbostarter/morphing-infinity

npx layro-cli add @turbostarter/morphing-infinity

npx layro-cli add @turbostarter/morphing-infinity

bunx layro-cli add @turbostarter/morphing-infinity

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { motion } from "motion/react";

const circleA =
  "M 12 8 C 14.21 8 16 9.79 16 12 C 16 14.21 14.21 16 12 16 C 9.79 16 8 14.21 8 12 C 8 9.79 9.79 8 12 8 Z";

const infinity =
  "M 12 12 C 14 8.5 19 8.5 19 12 C 19 15.5 14 15.5 12 12 C 10 8.5 5 8.5 5 12 C 5 15.5 10 15.5 12 12 Z";

const circleB =
  "M 12 16 C 14.21 16 16 14.21 16 12 C 16 9.79 14.21 8 12 8 C 9.79 8 8 9.79 8 12 C 8 14.21 9.79 16 12 16 Z";

function MorphingInfinity(props: React.ComponentProps<"svg">) {