Loading icon
Communicates that an indeterminate operation is in progress.
On this page
This docs is LLM-friendly and available as clean Markdown.
Supported browser agents can also use WebMCP to search, read, and open these docs. Learn more
Usage
import { GlLoadingIcon } from "gitlab-ui-react/loading-icon";<GlLoadingIcon label="Loading results" />Default
Use a loading icon when the duration or completion percentage is unknown. Prefer a skeleton loader when the layout of incoming content is predictable.
Loading icon
import { GlLoadingIcon } from "gitlab-ui-react/loading-icon";
export default function LoadingIconExample() {
return <GlLoadingIcon />;
}
Variants, sizes, and color
Use spinner for most loading states and dots where a compact animated treatment fits better. Choose a size that matches the surrounding content. The light color is intended for persistently dark backgrounds.
Variants, sizes, and color
Spinner
sm
md
lg
xl
Dots
sm
md
lg
xl
import { GlLoadingIcon } from "gitlab-ui-react/loading-icon";
const sizes = ["sm", "md", "lg", "xl"] as const;
export default function LoadingIconVariantsExample() {
return (
<div className="grid gap-5 md:grid-cols-2">
<div className="flex flex-col gap-4 rounded-default p-5">
<strong>Spinner</strong>
<div className="flex items-end gap-5">
{sizes.map((size) => (
<div key={size} className="flex flex-col items-center gap-2">
<GlLoadingIcon
label={`${size} spinner`}
size={size} />
<span>{size}</span>
</div>
))}
</div>
</div>
<div className="flex flex-col gap-4 rounded-default bg-neutral-950 p-5 text-white">
<strong>Dots</strong>
<div className="flex items-end gap-5">
{sizes.map((size) => (
<div key={size} className="flex flex-col items-center gap-2">
<GlLoadingIcon
color="light"
label={`${size} dots`}
size={size}
variant="dots" />
<span>{size}</span>
</div>
))}
</div>
</div>
</div>
);
}
Accessibility
- Set
labeloraria-labelto describe what is loading rather than repeating a generic message when context is available. - The component uses
role="status"by default so its label is announced without interrupting the current task. - Do not use animation as the only indication that content is unavailable; keep nearby controls disabled or provide explanatory text when needed.
API
| Prop | Description | Default |
|---|---|---|
variant |
Sets the indicator shape to spinner or dots. |
"spinner" |
size |
Sets sm, md, lg, or xl. |
"sm" |
color |
Uses the dark or light color treatment. |
"dark" |
inline |
Renders a <span> root instead of a <div>. |
false |
label |
Sets the status’s accessible name. | "Loading" |