Indeterminate Progress Bar

A loading bar where the indicator continually bounces back and forth or cycles infinitely, showing that a process is working but the exact completion time is unknown.

Use

Network requests with unknown length

Avoid

File uploads with known file sizes (use determinant progress)

Safer Alternative

No safer default listed.

Risk Level

Low risk

Live Demo

What It Is

A loading bar where the indicator continually bounces back and forth or cycles infinitely, showing that a process is working but the exact completion time is unknown.

✓When to Use

Network requests with unknown length
Query processing in databases

✕When NOT to Use

File uploads with known file sizes (use determinant progress)

Configuration Tips

01Animate the transform-origin or left/right properties of an inner bar in an infinite loop

You've Seen It In

Google Material DesignAndroid OS

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Create an indeterminate progress bar.

Reference Implementation

The same implementation approach used by the live preview, kept compact enough to inspect and adapt.

"use client";
import { motion } from 'framer-motion';

export function IndeterminateProgressBarDemo({ isPlaying = false }: { isPlaying?: boolean }) {
    return (
        <div className="flex h-64 w-full items-center justify-center overflow-hidden rounded-2xl bg-white p-4 shadow-sm ring-1 ring-stone-200">
            <div className="relative h-1.5 w-64 overflow-hidden rounded-full bg-stone-100">
                {isPlaying && (
                    <motion.div
                        className="absolute inset-y-0 left-0 bg-stone-800 rounded-full"
                        initial={{ x: "-100%", width: "50%" }}
                        animate={{ x: "200%" }}
                        transition={{
                            duration: 1.5,
                            ease: "easeInOut",
                            repeat: Infinity,
                        }}
                    />
                )}
            </div>
        </div>
    );
}

Related Effects

Spinner / Loading Circle

A circular animated icon that rotates continuously, signaling that a process is underway. The most universally recognized loading indicator.

Progress Bar

A horizontal bar that fills from left to right, showing the percentage of a task that's complete. Gives users a sense of how much longer they need to wait.