> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CircularProgressBar

> Show an animated circular indicator while progress is unknown.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`CircularProgressBar` is an indeterminate loading spinner. It animates continuously while mounted and does not accept a progress value. Use [ProgressBar](/ui/primitives/feedback/progress-bar) when you can report a percentage.

<StoryEmbed storyId="ui-feedback-circularprogressbar-circularprogressbar--default" title="CircularProgressBar example" />

## Usage

```tsx theme={null}
import { CircularProgressBar } from 'twenty-ui/primitives/feedback';
import { Text } from 'twenty-ui/primitives/typography';

export const ImportLoading = () => (
  <div role="status">
    <span aria-hidden="true">
      <CircularProgressBar size={24} barWidth={2} />
    </span>
    <Text>Importing records</Text>
  </div>
);
```

The application controls loading by mounting or removing the indicator. Keep an explanatory label beside it. The SVG does not supply an accessible name or live region and does not forward native attributes; apply those to a wrapper.

## Appearance

`size` sets the width and height in pixels and defaults to `50`. `barWidth` defaults to `5`; keep it smaller than half the size. `barColor` accepts a CSS color and defaults to `currentColor`, so it inherits the surrounding text color. Theme variables work as color values, for example `var(--t-font-color-secondary)`.

## Props

<ParamField body="barColor" type="string" default="currentColor">
  CSS stroke color. Defaults to the inherited text color.
</ParamField>

<ParamField body="barWidth" type="number" default="5">
  Stroke width in pixels. Keep it smaller than half of `size`.
</ParamField>

<ParamField body="size" type="number" default="50">
  Width and height of the spinner in pixels.
</ParamField>