Labeled Progress Indicator

Renders an animated progress bar with labels that change over time. It smoothly transitions between labels and updates the progress bar's width. Use it to display dynamic progress in a visually engaging way.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/labeled-progress-indicator

npx layro-cli add @watermeloncorp/labeled-progress-indicator

npx layro-cli add @watermeloncorp/labeled-progress-indicator

bunx layro-cli add @watermeloncorp/labeled-progress-indicator

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

Code

Demo

'use client';

import { motion, AnimatePresence } from 'motion/react';

import { useState, useEffect, type FC } from 'react';

export interface LabeledProgressIndicatorProps {
  labels: string[];
  progress?: string;
  intervalMs?: number;
  showThemeToggle?: boolean;
}

export const LabeledProgressIndicator: FC<LabeledProgressIndicatorProps> = ({