Implementation:OpenHands OpenHands Spinner
| Knowledge Sources | |
|---|---|
| Domains | UI_Components, React |
| Last Updated | 2026-02-11 21:00 GMT |
Overview
An SVG-based loading spinner that supports both indeterminate (continuous) and determinate (percentage-based) progress modes.
Description
The Spinner component renders an SVG circular progress indicator. In indeterminate mode (default), it displays a continuously spinning animation to indicate that an operation is in progress with no known completion percentage. In determinate mode, it renders a partial arc corresponding to the provided value (0-100), allowing the user to see exact progress. The SVG-based implementation ensures crisp rendering at any size. The source file is 77 lines long.
Usage
Use the Spinner to indicate loading states, background processing, file uploads, or any asynchronous operation. Use indeterminate mode when the duration is unknown, and determinate mode when progress can be measured as a percentage.
Code Reference
Source Location
openhands-ui/components/spinner/Spinner.tsx (77 lines)
Signature
interface SpinnerProps {
determinate?: boolean;
value?: number; // 0-100
}
Import
import { Spinner } from "@openhands/ui";
I/O Contract
Inputs (Props)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
determinate |
boolean |
No | false |
When true, the spinner displays a fixed arc based on the value prop instead of a continuous animation.
|
value |
number (0-100) |
No | — | The progress percentage for determinate mode. Ignored when determinate is false.
|
Outputs
Renders an SVG circular progress indicator. In indeterminate mode, it continuously animates. In determinate mode, it displays a partial arc proportional to the value.
Usage Examples
import { Spinner } from "@openhands/ui";
function LoadingState() {
return (
<div>
{/* Indeterminate: unknown progress */}
<Spinner />
{/* Determinate: 65% complete */}
<Spinner determinate value={65} />
</div>
);
}
function FileUpload({ progress }: { progress: number }) {
return (
<div>
<Spinner determinate value={progress} />
<span>{progress}% uploaded</span>
</div>
);
}