# Progress

A horizontal progress bar with determinate and indeterminate modes.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



<ComponentPreview name="progress/Basic" />

## Import [#import]

```rust
use maccn::{MacProgress, ProgressSize};
```

## Usage [#usage]

```rust
// Determinate
MacProgress::new("upload").value(40.);

// Indeterminate
MacProgress::new("loading").indeterminate(true);
```

## Indeterminate [#indeterminate]

<ComponentPreview name="progress/Indeterminate" />

```rust
use maccn::MacProgress;

MacProgress::new("progress-indeterminate")
    .w(px(220.))
    .indeterminate(true)
```

## Sizes [#sizes]

<ComponentPreview name="progress/Sizes" />

```rust
use gpui::div;
use maccn::{MacProgress, ProgressSize};

div()
    .flex()
    .flex_col()
    .gap_2()
    .w(px(220.))
    .child(
        MacProgress::new("progress-r")
            .w_full()
            .value(progress_value * 100.),
    )
    .child(
        MacProgress::new("progress-s")
            .size(ProgressSize::Small)
            .w_full()
            .value(progress_value * 100.),
    )
```

## API [#api]

### Props [#props]

| Prop            | Type           | Default   |
| --------------- | -------------- | --------- |
| `size`          | `ProgressSize` | `Regular` |
| `value`         | `f32`          | `0.0`     |
| `indeterminate` | `bool`         | `false`   |

### ProgressSize [#progresssize]

| Variant   | Height |
| --------- | ------ |
| `Regular` | 10px   |
| `Small`   | 6px    |