Progress

Progress indicator showing the current position within the card stack.

render_progress_indicator

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

---

source

render_progress_indicator

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.

# 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!

# 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!

# 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!

# 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!