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

# CircularProgressIndicator

> Documentation for CircularProgressIndicator

export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";

export const circularProgressIndicatorPreviewJson = {
  "type": "circularProgressIndicator",
  "color": "#541204",
  "strokeWidth": 6,
  "backgroundColor": "#FFD700",
  "strokeCap": "round"
};
export const circularProgressIndicatorPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac CircularProgressIndicator allows you to build a Flutter CircularProgressIndicator widget using JSON.
To know more about the CircularProgressIndicator widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html).

## Properties

| Property        | Type            | Description                                                        |
| --------------- | --------------- | ------------------------------------------------------------------ |
| value           | `double`        | The progress of this progress indicator.                           |
| backgroundColor | `StacColor`     | The hex color of the track being filled by the progress indicator. |
| color           | `StacColor`     | The hex color of the progress indicator.                           |
| strokeWidth     | `double`        | The width of the progress indicator.                               |
| strokeAlign     | `double`        | The relative position of the stroke on progress indicator.         |
| semanticsLabel  | `String`        | Provides a textual description of the widget.                      |
| semanticsValue  | `String`        | Provides a textual description of the widget.                      |
| strokeCap       | `StacStrokeCap` | The progress indicator's line ending.                              |

## Example

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacCircularProgressIndicator(
      color: '#541204',
      strokeWidth: 6,
      backgroundColor: StacColors.amber,
      strokeCap: StacStrokeCap.round,
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "circularProgressIndicator",
      "color": "#541204",
      "strokeWidth": 6,
      "backgroundColor": "#FFD700",
      "strokeCap": "round"
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={circularProgressIndicatorPreviewSrc}
        title="Stac Playground"
        className="w-full rounded-xl border-0"
        style={{ height: "640px" }}
        loading="lazy"
        onLoad={(event) => {
      const iframe = event.currentTarget;
      const targetOrigin = PLAYGROUND_BASE_URL;
      const message = {
        type: "stac-preview-json",
        payload: circularProgressIndicatorPreviewJson
      };

      let attempts = 0;
      const maxAttempts = 12;
      const interval = setInterval(() => {
        iframe.contentWindow?.postMessage(message, targetOrigin);
        attempts += 1;

        if (attempts >= maxAttempts) {
          clearInterval(interval);
        }
      }, 250);
    }}
      />
    </Frame>
  </Tab>
</Tabs>