# Progress


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

## render_progress_indicator

Displays the current focused position as “Item X of Y” with 1-based
indexing for user-facing display.

------------------------------------------------------------------------

<a
href="https://github.com/cj-mills/cjm-fasthtml-card-stack/blob/main/cjm_fasthtml_card_stack/components/progress.py#L24"
target="_blank" style="float:right; font-size:smaller">source</a>

### render_progress_indicator

``` python

def render_progress_indicator(
    focused_index:int, # Currently focused item index (0-based)
    total_items:int, # Total number of items
    ids:CardStackHtmlIds, # HTML IDs for this card stack instance
    label:str='Item', # Label prefix (e.g., "Item", "Segment", "Card")
    oob:bool=False, # Whether to render as OOB swap
)->Any: # Progress indicator component

```

*Render position indicator showing current item in the collection.*

``` python
# Test render_progress_indicator
from fasthtml.common import to_xml

ids = CardStackHtmlIds(prefix="cs0")
progress = render_progress_indicator(0, 20, ids)
html = to_xml(progress)
assert 'id="cs0-progress"' in html
assert "Item 1 of 20" in html
print("Basic progress test passed!")
```

    Basic progress test passed!

``` python
# Test custom label
progress = render_progress_indicator(4, 100, ids, label="Segment")
html = to_xml(progress)
assert "Segment 5 of 100" in html
print("Custom label test passed!")
```

    Custom label test passed!

``` python
# Test OOB mode
progress = render_progress_indicator(9, 50, ids, oob=True)
html = to_xml(progress)
assert 'hx-swap-oob="true"' in html

# Non-OOB should not have the attribute
progress = render_progress_indicator(9, 50, ids, oob=False)
html = to_xml(progress)
assert 'hx-swap-oob' not in html
print("OOB mode tests passed!")
```

    OOB mode tests passed!

``` python
# Test number formatting with large values
progress = render_progress_indicator(999, 1500, ids)
html = to_xml(progress)
assert "Item 1,000 of 1,500" in html
print("Number formatting test passed!")
```

    Number formatting test passed!