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

# Progress

> Linear progress indicator for task completion and status tracking

## Overview

HuxProgress is a customizable linear progress indicator that displays the completion status of a task or process. It provides smooth animations, consistent styling, and automatic theme adaptation, making it perfect for showing upload progress, download status, or any task completion percentage.

## Basic Usage

### Basic Progress

```dart theme={null}
HuxProgress(
  value: 0.5,
)
```

### Progress with Label

```dart theme={null}
HuxProgress(
  value: 0.75,
  label: 'Uploading',
)
```

### Progress with Value Display

```dart theme={null}
HuxProgress(
  value: 0.6,
  label: 'Storage Used',
  showValue: true,
)
```

## Variants

HuxProgress supports three visual variants to indicate different states:

### Primary Variant

```dart theme={null}
HuxProgress(
  value: 0.6,
  label: 'Progress',
  variant: HuxProgressVariant.primary,
  showValue: true,
)
```

### Success Variant

```dart theme={null}
HuxProgress(
  value: 0.8,
  label: 'Upload Complete',
  variant: HuxProgressVariant.success,
  showValue: true,
)
```

### Destructive Variant

```dart theme={null}
HuxProgress(
  value: 0.3,
  label: 'Error',
  variant: HuxProgressVariant.destructive,
  showValue: true,
)
```

## Sizes

HuxProgress comes in three size variants:

### Small

```dart theme={null}
HuxProgress(
  value: 0.5,
  size: HuxProgressSize.small,
  label: 'Small Progress',
)
```

### Medium (Default)

```dart theme={null}
HuxProgress(
  value: 0.5,
  size: HuxProgressSize.medium,
  label: 'Medium Progress',
)
```

### Large

```dart theme={null}
HuxProgress(
  value: 0.5,
  size: HuxProgressSize.large,
  label: 'Large Progress',
)
```

## Custom Values

By default, HuxProgress uses values between 0.0 and 1.0. You can customize the range:

```dart theme={null}
HuxProgress(
  value: 75.0,
  min: 0.0,
  max: 100.0,
  label: 'Storage Used',
  showValue: true,
)
```

When using custom min/max values, the displayed value will show as a number instead of a percentage.

## Custom Colors

You can customize both the progress fill color and background color:

```dart theme={null}
HuxProgress(
  value: 0.7,
  label: 'Custom Progress',
  color: Colors.blue,
  backgroundColor: Colors.grey[200],
)
```

## Custom Border Radius

```dart theme={null}
HuxProgress(
  value: 0.6,
  label: 'Rounded Progress',
  borderRadius: 8.0,
)
```

## Animated Progress

HuxProgress automatically animates when the value changes:

```dart theme={null}
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  double _progress = 0.0;

  void _startUpload() {
    // Simulate upload progress
    Timer.periodic(Duration(milliseconds: 100), (timer) {
      setState(() {
        _progress += 0.01;
        if (_progress >= 1.0) {
          _progress = 1.0;
          timer.cancel();
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return HuxProgress(
      value: _progress,
      label: 'Uploading file...',
      showValue: true,
      variant: HuxProgressVariant.success,
    );
  }
}
```

## API Reference

### HuxProgress

| Property          | Type                 | Default                      | Description                                                 |
| ----------------- | -------------------- | ---------------------------- | ----------------------------------------------------------- |
| `value`           | `double`             | **required**                 | The current progress value (between min and max)            |
| `min`             | `double`             | `0.0`                        | Minimum value for the progress                              |
| `max`             | `double`             | `1.0`                        | Maximum value for the progress                              |
| `label`           | `String?`            | `null`                       | Optional label displayed above the progress bar             |
| `showValue`       | `bool`               | `false`                      | Whether to show the current value as a percentage or number |
| `size`            | `HuxProgressSize`    | `HuxProgressSize.medium`     | Size variant of the progress bar                            |
| `variant`         | `HuxProgressVariant` | `HuxProgressVariant.primary` | Visual variant of the progress bar                          |
| `backgroundColor` | `Color?`             | `null`                       | Custom background color for the progress track              |
| `color`           | `Color?`             | `null`                       | Custom color for the progress fill                          |
| `borderRadius`    | `double?`            | `null`                       | Border radius for the progress bar                          |

### HuxProgressSize

* `small` - Small progress bar (4px height)
* `medium` - Medium progress bar (6px height)
* `large` - Large progress bar (8px height)

### HuxProgressVariant

* `primary` - Primary progress using theme primary color
* `success` - Success progress using green color
* `destructive` - Destructive progress using red color

## Best Practices

* Use progress indicators for operations that take more than a few seconds
* Show labels to provide context about what is loading
* Use the success variant for completed operations
* Use the destructive variant for errors or failed operations
* Consider using `showValue: true` when precise progress information is important
* For uploads/downloads, update the progress value frequently for smooth animation