--0":"#B9BED5"},"children":">"}]]}]}] 48:["$","div",null,{"className":"ec-line","children":["$","div",null,{"className":"code","children":[["$","span",null,{"className":"indent","children":["$","span",null,{"style":{"--0":"#B9BED5"},"children":" "}]}],["$","span",null,{"style":{"--0":"#B9BED5"},"children":");"}]]}]}] 49:["$","div",null,{"className":"ec-line","children":["$","div",null,{"className":"code","children":["$","span",null,{"style":{"--0":"#B9BED5"},"children":"}"}]}]}] 4c:T476,"use client";import { Progress } from "@base-ui/react/progress";import { motion } from "motion/react";import * as React from "react";export default function ExampleProgress() { const [value, setValue] = React.useState(20); React.useEffect(() => { const interval = setInterval(() => { setValue((current) => Math.min(100, Math.round(current + Math.random() * 25)), ); }, 1000); return () => clearInterval(interval); }, []); return (

Uploading files

} className="h-full bg-indigo br-pill" /> );}4a:["$","div",null,{"className":"copy","children":[["$","div",null,{"aria-live":"polite","children":"$undefined"}],["$","button",null,{"title":"Copy to clipboard","data-copied":"Copied!","data-code":"$4c","children":["$","div",null,{"children":"$undefined"}]}]]}]

Progress

Installation

Examples

Base

API Reference