progress

Progress bar can be used to show the progress of a task or to show the passing of time.

Base Progress

progress = SingleValueFactory("progress", "Base progress component for <progress> tag") # Base progress component

Progress Colors

progress_colors = enums_to_simple_factory(progress, [SemanticColorBrand, SemanticColorStatus], "Progress color variants using daisyUI semantic colors") # Progress color variants

Progress Test Examples

---

source

test_progress_basic_examples

 test_progress_basic_examples ()

Test basic progress utilities.

def test_progress_basic_examples():
    """Test basic progress utilities."""
    # Basic progress
    assert str(progress) == "progress"
    
    # Progress with modifiers
    assert str(progress.hover) == "hover:progress"
    assert str(progress.md) == "md:progress"
    assert str(progress.dark) == "dark:progress"

# Run the tests
test_progress_basic_examples()

---

source

test_progress_colors_examples

 test_progress_colors_examples ()

Test progress color variants.

def test_progress_colors_examples():
    """Test progress color variants."""
    # All color variants
    assert str(progress_colors.neutral) == "progress-neutral"
    assert str(progress_colors.primary) == "progress-primary"
    assert str(progress_colors.secondary) == "progress-secondary"
    assert str(progress_colors.accent) == "progress-accent"
    assert str(progress_colors.info) == "progress-info"
    assert str(progress_colors.success) == "progress-success"
    assert str(progress_colors.warning) == "progress-warning"
    assert str(progress_colors.error) == "progress-error"
    
    # With modifiers
    assert str(progress_colors.primary.hover) == "hover:progress-primary"
    assert str(progress_colors.success.focus) == "focus:progress-success"

# Run the tests
test_progress_colors_examples()

---

source

test_progress_basic_fasthtml_examples

 test_progress_basic_fasthtml_examples ()

Test basic progress examples from daisyUI v5 documentation.

def test_progress_basic_fasthtml_examples():
    """Test basic progress examples from daisyUI v5 documentation."""
    from fasthtml.common import Progress, Div
    from cjm_fasthtml_tailwind.utilities.sizing import w
    
    # Progress with different values
    progress_0 = Progress(value="0", max="100", cls=combine_classes(progress, w._56))
    assert progress_0.tag == "progress"
    assert "progress" in progress_0.attrs['class']
    assert "w-56" in progress_0.attrs['class']
    assert progress_0.attrs['value'] == "0"
    assert progress_0.attrs['max'] == "100"
    
    progress_10 = Progress(value="10", max="100", cls=combine_classes(progress, w._56))
    assert progress_10.attrs['value'] == "10"
    assert progress_10.attrs['max'] == "100"
    
    progress_40 = Progress(value="40", max="100", cls=combine_classes(progress, w._56))
    assert progress_40.attrs['value'] == "40"
    assert progress_40.attrs['max'] == "100"
    
    progress_70 = Progress(value="70", max="100", cls=combine_classes(progress, w._56))
    assert progress_70.attrs['value'] == "70"
    assert progress_70.attrs['max'] == "100"
    
    progress_100 = Progress(value="100", max="100", cls=combine_classes(progress, w._56))
    assert progress_100.attrs['value'] == "100"
    assert progress_100.attrs['max'] == "100"
    
    # Return all elements in a Div
    return Div(
        progress_0,
        progress_10,
        progress_40,
        progress_70,
        progress_100
    )

# Run the tests
test_progress_basic_fasthtml_examples()

<div>
<progress value="0" max="100" class="progress w-56"></progress><progress value="10" max="100" class="progress w-56"></progress><progress value="40" max="100" class="progress w-56"></progress><progress value="70" max="100" class="progress w-56"></progress><progress value="100" max="100" class="progress w-56"></progress></div>

test_func = test_progress_basic_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_progress_primary_color_fasthtml_examples

 test_progress_primary_color_fasthtml_examples ()

Test progress with primary color from daisyUI v5 documentation.

def test_progress_primary_color_fasthtml_examples():
    """Test progress with primary color from daisyUI v5 documentation."""
    from fasthtml.common import Progress, Div
    from cjm_fasthtml_tailwind.utilities.sizing import w
    
    # Primary color progress with different values
    primary_0 = Progress(value="0", max="100", cls=combine_classes(progress, progress_colors.primary, w._56))
    assert "progress" in primary_0.attrs['class']
    assert "progress-primary" in primary_0.attrs['class']
    assert "w-56" in primary_0.attrs['class']
    assert primary_0.attrs['value'] == "0"
    
    primary_10 = Progress(value="10", max="100", cls=combine_classes(progress, progress_colors.primary, w._56))
    assert "progress-primary" in primary_10.attrs['class']
    assert primary_10.attrs['value'] == "10"
    
    primary_40 = Progress(value="40", max="100", cls=combine_classes(progress, progress_colors.primary, w._56))
    assert "progress-primary" in primary_40.attrs['class']
    assert primary_40.attrs['value'] == "40"
    
    primary_70 = Progress(value="70", max="100", cls=combine_classes(progress, progress_colors.primary, w._56))
    assert "progress-primary" in primary_70.attrs['class']
    assert primary_70.attrs['value'] == "70"
    
    primary_100 = Progress(value="100", max="100", cls=combine_classes(progress, progress_colors.primary, w._56))
    assert "progress-primary" in primary_100.attrs['class']
    assert primary_100.attrs['value'] == "100"
    
    # Return all elements in a Div
    return Div(
        primary_0,
        primary_10,
        primary_40,
        primary_70,
        primary_100
    )

# Run the tests
test_progress_primary_color_fasthtml_examples()

<div>
<progress value="0" max="100" class="progress progress-primary w-56"></progress><progress value="10" max="100" class="progress progress-primary w-56"></progress><progress value="40" max="100" class="progress progress-primary w-56"></progress><progress value="70" max="100" class="progress progress-primary w-56"></progress><progress value="100" max="100" class="progress progress-primary w-56"></progress></div>

test_func = test_progress_primary_color_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_progress_all_colors_fasthtml_examples

 test_progress_all_colors_fasthtml_examples ()

Test progress with all semantic colors from daisyUI v5 documentation.

def test_progress_all_colors_fasthtml_examples():
    """Test progress with all semantic colors from daisyUI v5 documentation."""
    from fasthtml.common import Progress, Div
    from cjm_fasthtml_tailwind.utilities.sizing import w
    
    # Helper function to create progress bars with different values for a given color
    def create_color_set(color_class, color_name):
        return [
            Progress(value="0", max="100", cls=combine_classes(progress, color_class, w._56)),
            Progress(value="10", max="100", cls=combine_classes(progress, color_class, w._56)),
            Progress(value="40", max="100", cls=combine_classes(progress, color_class, w._56)),
            Progress(value="70", max="100", cls=combine_classes(progress, color_class, w._56)),
            Progress(value="100", max="100", cls=combine_classes(progress, color_class, w._56))
        ]
    
    # Secondary color
    secondary_bars = create_color_set(progress_colors.secondary, "secondary")
    for bar in secondary_bars:
        assert "progress-secondary" in bar.attrs['class']
    
    # Accent color
    accent_bars = create_color_set(progress_colors.accent, "accent")
    for bar in accent_bars:
        assert "progress-accent" in bar.attrs['class']
    
    # Neutral color
    neutral_bars = create_color_set(progress_colors.neutral, "neutral")
    for bar in neutral_bars:
        assert "progress-neutral" in bar.attrs['class']
    
    # Info color
    info_bars = create_color_set(progress_colors.info, "info")
    for bar in info_bars:
        assert "progress-info" in bar.attrs['class']
    
    # Success color
    success_bars = create_color_set(progress_colors.success, "success")
    for bar in success_bars:
        assert "progress-success" in bar.attrs['class']
    
    # Warning color
    warning_bars = create_color_set(progress_colors.warning, "warning")
    for bar in warning_bars:
        assert "progress-warning" in bar.attrs['class']
    
    # Error color
    error_bars = create_color_set(progress_colors.error, "error")
    for bar in error_bars:
        assert "progress-error" in bar.attrs['class']
    
    # Return all elements grouped by color
    return Div(
        Div(*secondary_bars),
        Div(*accent_bars),
        Div(*neutral_bars),
        Div(*info_bars),
        Div(*success_bars),
        Div(*warning_bars),
        Div(*error_bars)
    )

# Run the tests
test_progress_all_colors_fasthtml_examples()

<div>
  <div>
<progress value="0" max="100" class="progress progress-secondary w-56"></progress><progress value="10" max="100" class="progress progress-secondary w-56"></progress><progress value="40" max="100" class="progress progress-secondary w-56"></progress><progress value="70" max="100" class="progress progress-secondary w-56"></progress><progress value="100" max="100" class="progress progress-secondary w-56"></progress>  </div>
  <div>
<progress value="0" max="100" class="progress progress-accent w-56"></progress><progress value="10" max="100" class="progress progress-accent w-56"></progress><progress value="40" max="100" class="progress progress-accent w-56"></progress><progress value="70" max="100" class="progress progress-accent w-56"></progress><progress value="100" max="100" class="progress progress-accent w-56"></progress>  </div>
  <div>
<progress value="0" max="100" class="progress progress-neutral w-56"></progress><progress value="10" max="100" class="progress progress-neutral w-56"></progress><progress value="40" max="100" class="progress progress-neutral w-56"></progress><progress value="70" max="100" class="progress progress-neutral w-56"></progress><progress value="100" max="100" class="progress progress-neutral w-56"></progress>  </div>
  <div>
<progress value="0" max="100" class="progress progress-info w-56"></progress><progress value="10" max="100" class="progress progress-info w-56"></progress><progress value="40" max="100" class="progress progress-info w-56"></progress><progress value="70" max="100" class="progress progress-info w-56"></progress><progress value="100" max="100" class="progress progress-info w-56"></progress>  </div>
  <div>
<progress value="0" max="100" class="progress progress-success w-56"></progress><progress value="10" max="100" class="progress progress-success w-56"></progress><progress value="40" max="100" class="progress progress-success w-56"></progress><progress value="70" max="100" class="progress progress-success w-56"></progress><progress value="100" max="100" class="progress progress-success w-56"></progress>  </div>
  <div>
<progress value="0" max="100" class="progress progress-warning w-56"></progress><progress value="10" max="100" class="progress progress-warning w-56"></progress><progress value="40" max="100" class="progress progress-warning w-56"></progress><progress value="70" max="100" class="progress progress-warning w-56"></progress><progress value="100" max="100" class="progress progress-warning w-56"></progress>  </div>
  <div>
<progress value="0" max="100" class="progress progress-error w-56"></progress><progress value="10" max="100" class="progress progress-error w-56"></progress><progress value="40" max="100" class="progress progress-error w-56"></progress><progress value="70" max="100" class="progress progress-error w-56"></progress><progress value="100" max="100" class="progress progress-error w-56"></progress>  </div>
</div>

test_func = test_progress_all_colors_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_progress_indeterminate_fasthtml_examples

 test_progress_indeterminate_fasthtml_examples ()

Test indeterminate progress (without value) from daisyUI v5 documentation.

def test_progress_indeterminate_fasthtml_examples():
    """Test indeterminate progress (without value) from daisyUI v5 documentation."""
    from fasthtml.common import Progress, Div
    from cjm_fasthtml_tailwind.utilities.sizing import w
    
    # Indeterminate progress (without value)
    indeterminate = Progress(cls=combine_classes(progress, w._56))
    assert indeterminate.tag == "progress"
    assert "progress" in indeterminate.attrs['class']
    assert "w-56" in indeterminate.attrs['class']
    # Check that value and max attributes are not present
    assert 'value' not in indeterminate.attrs
    assert 'max' not in indeterminate.attrs
    
    # Return the element in a Div
    return Div(indeterminate)

# Run the tests
test_progress_indeterminate_fasthtml_examples()

<div>
<progress class="progress w-56"></progress></div>

test_func = test_progress_indeterminate_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()