proNew190 lines · framer-motion

Progress Boot

A boot sequence that fills, counts and reports in lockstep. A full-width showcase section styled like a product boot sequence: a progress bar, a percentage counter and a status line that all advance from the same requestAnimationFrame clock, plus an always-visible Replay button.

Use it for: Demoing a first-run setup, sync or install sequence on a status page, changelog or component docs page.
Themes: Light + dark
License: Commercial use

Live

Boot sequence

Watch it boot in real time

A progress bar, a percentage counter and a status line, all driven off one clock so they never drift apart.

Starting up

Booting…

tsx

"use client";

import * as React from "react";
import { useInView, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width showcase section for a product "boot sequence" loader: a progress bar,
 * a percentage counter and a status line all driven off one requestAnimationFrame
 * clock, with a fixed deterministic set of status checkpoints and an always-visible
 * Replay button that restarts the whole sequence from 0%.
 */

export type LoaderProgressBootColor = "signal" | "info" | "lime" | "ok";

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→A single requestAnimationFrame loop tracks elapsed time via performance.now() deltas and derives the fill width, the percentage counter and the status text from one shared progress value, so they can never drift out of sync.
→Status text comes from a fixed, deterministic array of checkpoints (0% "Starting up", 35% "Loading modules", 70% "Almost there", 100% "Ready") rather than a random or guessed timer.
→durationSeconds sets how long a full 0-100% run takes; color picks the design token the bar fill and glow use; showPercentage toggles the numeric counter; label sets the section headline.
→The loop pauses without losing its place when the section scrolls offscreen (useInView) or the tab is hidden (document.hidden), using a ref so pausing never restarts the effect.
→A Replay button is always visible (not just after completion) and restarts the sequence from 0% on click by bumping a token that re-runs the animation effect.
→With prefers-reduced-motion, the sequence settles on the finished 100% "Ready" frame on mount instead of auto-running; clicking Replay still runs the sequence once, on demand.

Accessibility

✓The progress bar is a real element with `role="progressbar"` and `aria-valuemin`/`aria-valuemax`/`aria-valuenow` kept in sync with the fill.
✓The status line is `aria-live="polite"` so the checkpoint changes are announced; the numeric percentage is `aria-hidden` to avoid duplicate announcements.
✓Replay is a real `<button>`, reachable and operable by keyboard with a visible focus ring.
✓Honours prefers-reduced-motion.