# Circular Progress Component

Circular progress indicators show the progress of ongoing tasks.

## Usage {#usage}

Import the component:

```js
import 'mdui/components/circular-progress.js';
```

Import the TypeScript type:

```ts
import type { CircularProgress } from 'mdui/components/circular-progress.js';
```

Example:

```html
<mdui-circular-progress></mdui-circular-progress>
```

## Examples {#examples}

### Determinate Progress {#example-value}

By default, the circular progress indicator is in an indeterminate state. To set the current progress, use the `value` attribute. The default maximum progress value is `1`.

```html
<mdui-circular-progress value="0.5"></mdui-circular-progress>
```

To set the maximum progress value, use the `max` attribute.

```html
<mdui-circular-progress value="30" max="100"></mdui-circular-progress>
```

## mdui-circular-progress API

### Properties

<table>
<thead>
  <tr>
    <th>Attribute</th>
    <th>Property</th>
    <th>Reflect</th>
    <th>Type</th>
    <th>Default</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>max</td>
    <td>max</td>
    <td>true</td>
    <td>number</td>
    <td>1</td>
    <td><p>Sets the maximum value for the progress indicator. The default value is <code>1</code>.</p>
</td>
  </tr>
  <tr>
    <td>value</td>
    <td>value</td>
    <td>false</td>
    <td>number</td>
    <td></td>
    <td><p>Sets the current value of the progress indicator. If not specified, the progress indicator is in an indeterminate state.</p>
</td>
  </tr>
</tbody>
</table>