---
title: Spinner
description: Shows that something is loading where a skeleton doesn't fit.
---

```tsx
import { Spinner } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function SpinnerBasic() {
  return (
    <Preview>
      <Spinner.Root />
    </Preview>
  );
}
```

- [Button](/deft/components/button) shows it on its own while loading. Elsewhere prefer a [Skeleton](/deft/components/skeleton) in the shape of the content.
- It takes the icon size and the current text colour; `className` sets another size or colour.
- It renders inside an `output` labeled "Loading" for screen readers.

## API

Parts: `Root`. Props go to the Tabler `IconLoader2` icon.