# Progress Bar

## Visual Structure

```
ga-progress [--success|--error|--indeterminate]
  ├── ga-progress__label (optional)
  ├── ga-progress__buffer
  │   └── ga-progress__bar
  └── ga-progress__helper (optional)
```

## Elements Hierarchy

### Core Block

- `ga-progress` - Main container for the progress bar component

### Mandatory Elements

- `ga-progress__buffer` - Background buffer for the progress bar
- `ga-progress__bar` - Actual progress indicator

### Optional Elements

- `ga-progress__label` - Label for the progress bar
- `ga-progress__helper` - Helper text providing additional context

### Modifiers

- `ga-progress--success` - Indicates a successful operation
- `ga-progress--error` - Indicates an error or failure
- `ga-progress--indeterminate` - Represents an ongoing process without a defined end

## Examples

### Default

```html
<div class="ga-progress w-40">
  <div class="ga-progress__label">Label</div>
  <div class="ga-progress__buffer">
    <div class="ga-progress__bar" style="width: 40%"></div>
  </div>
  <div class="ga-progress__helper">Helper text</div>
</div>
```

### Success

```html
<div class="ga-progress ga-progress--success w-40">
  <div class="ga-progress__label">Label</div>
  <div class="ga-progress__buffer">
    <div class="ga-progress__bar" style="width: 40%"></div>
  </div>
  <div class="ga-progress__helper">
    <!-- icon: circle-check, size=16, class="ga-icon" -->
    Helper text
  </div>
</div>
```

### Error

```html
<div class="ga-progress ga-progress--error w-40">
  <div class="ga-progress__label">Label</div>
  <div class="ga-progress__buffer">
    <div class="ga-progress__bar" style="width: 40%"></div>
  </div>
  <div class="ga-progress__helper">
    <!-- icon: octagon-alert, size=16, class="ga-icon" -->
    Helper text
  </div>
</div>
```

### Indeterminate

```html
<div class="ga-progress ga-progress--indeterminate w-40">
  <div class="ga-progress__label">Label</div>
  <div class="ga-progress__buffer"><div class="ga-progress__bar"></div></div>
  <div class="ga-progress__helper">Helper text</div>
</div>
```