loading

Loading shows an animation to indicate that something is loading.

Base Loading

loading = SingleValueFactory("loading", "Base loading component") # Base loading component

Loading Styles

---

LoadingStyle

def LoadingStyle(
    args:VAR_POSITIONAL, kwds:VAR_KEYWORD
):

str(object=’’) -> str str(bytes_or_buffer[, encoding[, errors]]) -> str

Create a new string object from the given object. If encoding or errors is specified, then the object must expose a data buffer that will be decoded using the given encoding and error handler. Otherwise, returns the result of object.__str__() (if defined) or repr(object). encoding defaults to sys.getdefaultencoding(). errors defaults to ‘strict’.

class LoadingStyle(str, Enum):
    SPINNER = "spinner"
    DOTS = "dots"
    RING = "ring"
    BALL = "ball"
    BARS = "bars"
    INFINITY = "infinity"

loading_styles = enums_to_simple_factory(loading, [LoadingStyle], "Loading styles") # Loading styles

Loading Sizes

loading_sizes = enums_to_simple_factory(loading, [DaisyUINamedSize], "Loading size variants from extra small to extra large") # Loading size variants

Loading Test Examples

---

test_loading_basic_examples

def test_loading_basic_examples(
    
):

Test basic loading utilities.

def test_loading_basic_examples():
    """Test basic loading utilities."""
    # Basic loading
    assert str(loading) == "loading"
    
    # Loading with modifiers
    assert str(loading.hover) == "hover:loading"
    assert str(loading.md) == "md:loading"
    assert str(loading.dark) == "dark:loading"

# Run the tests
test_loading_basic_examples()

---

test_loading_styles_examples

def test_loading_styles_examples(
    
):

Test loading style variants.

def test_loading_styles_examples():
    """Test loading style variants."""
    assert str(loading_styles.spinner) == "loading-spinner"
    assert str(loading_styles.dots) == "loading-dots"
    assert str(loading_styles.ring) == "loading-ring"
    assert str(loading_styles.ball) == "loading-ball"
    assert str(loading_styles.bars) == "loading-bars"
    assert str(loading_styles.infinity) == "loading-infinity"

# Run the tests
test_loading_styles_examples()

---

test_loading_sizes_examples

def test_loading_sizes_examples(
    
):

Test loading size variants.

def test_loading_sizes_examples():
    """Test loading size variants."""
    assert str(loading_sizes.xs) == "loading-xs"
    assert str(loading_sizes.sm) == "loading-sm"
    assert str(loading_sizes.md) == "loading-md"
    assert str(loading_sizes.lg) == "loading-lg"
    assert str(loading_sizes.xl) == "loading-xl"
    
    # With responsive modifiers
    assert str(loading_sizes.xs.sm) == "sm:loading-xs"
    assert str(loading_sizes.lg.md) == "md:loading-lg"

# Run the tests
test_loading_sizes_examples()

---

test_loading_spinner_fasthtml_examples

def test_loading_spinner_fasthtml_examples(
    
):

Test loading spinner with all sizes from daisyUI v5 documentation.

def test_loading_spinner_fasthtml_examples():
    """Test loading spinner with all sizes from daisyUI v5 documentation."""
    from fasthtml.common import Span, Div
    
    # Loading spinner extra small
    spinner_xs = Span(cls=combine_classes(loading, loading_styles.spinner, loading_sizes.xs))
    assert spinner_xs.tag == "span"
    assert "loading" in spinner_xs.attrs['class']
    assert "loading-spinner" in spinner_xs.attrs['class']
    assert "loading-xs" in spinner_xs.attrs['class']
    
    # Loading spinner small
    spinner_sm = Span(cls=combine_classes(loading, loading_styles.spinner, loading_sizes.sm))
    assert "loading" in spinner_sm.attrs['class']
    assert "loading-spinner" in spinner_sm.attrs['class']
    assert "loading-sm" in spinner_sm.attrs['class']
    
    # Loading spinner medium
    spinner_md = Span(cls=combine_classes(loading, loading_styles.spinner, loading_sizes.md))
    assert "loading" in spinner_md.attrs['class']
    assert "loading-spinner" in spinner_md.attrs['class']
    assert "loading-md" in spinner_md.attrs['class']
    
    # Loading spinner large
    spinner_lg = Span(cls=combine_classes(loading, loading_styles.spinner, loading_sizes.lg))
    assert "loading" in spinner_lg.attrs['class']
    assert "loading-spinner" in spinner_lg.attrs['class']
    assert "loading-lg" in spinner_lg.attrs['class']
    
    # Loading spinner extra large
    spinner_xl = Span(cls=combine_classes(loading, loading_styles.spinner, loading_sizes.xl))
    assert "loading" in spinner_xl.attrs['class']
    assert "loading-spinner" in spinner_xl.attrs['class']
    assert "loading-xl" in spinner_xl.attrs['class']
    
    # Return all spinners in a Div
    return Div(
        spinner_xs,
        spinner_sm,
        spinner_md,
        spinner_lg,
        spinner_xl
    )

# Run the tests
test_loading_spinner_fasthtml_examples()

test_func = test_loading_spinner_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()

---

test_loading_dots_fasthtml_examples

def test_loading_dots_fasthtml_examples(
    
):

Test loading dots with all sizes from daisyUI v5 documentation.

def test_loading_dots_fasthtml_examples():
    """Test loading dots with all sizes from daisyUI v5 documentation."""
    from fasthtml.common import Span, Div
    
    # Loading dots extra small
    dots_xs = Span(cls=combine_classes(loading, loading_styles.dots, loading_sizes.xs))
    assert dots_xs.tag == "span"
    assert "loading" in dots_xs.attrs['class']
    assert "loading-dots" in dots_xs.attrs['class']
    assert "loading-xs" in dots_xs.attrs['class']
    
    # Loading dots small
    dots_sm = Span(cls=combine_classes(loading, loading_styles.dots, loading_sizes.sm))
    assert "loading" in dots_sm.attrs['class']
    assert "loading-dots" in dots_sm.attrs['class']
    assert "loading-sm" in dots_sm.attrs['class']
    
    # Loading dots medium
    dots_md = Span(cls=combine_classes(loading, loading_styles.dots, loading_sizes.md))
    assert "loading" in dots_md.attrs['class']
    assert "loading-dots" in dots_md.attrs['class']
    assert "loading-md" in dots_md.attrs['class']
    
    # Loading dots large
    dots_lg = Span(cls=combine_classes(loading, loading_styles.dots, loading_sizes.lg))
    assert "loading" in dots_lg.attrs['class']
    assert "loading-dots" in dots_lg.attrs['class']
    assert "loading-lg" in dots_lg.attrs['class']
    
    # Loading dots extra large
    dots_xl = Span(cls=combine_classes(loading, loading_styles.dots, loading_sizes.xl))
    assert "loading" in dots_xl.attrs['class']
    assert "loading-dots" in dots_xl.attrs['class']
    assert "loading-xl" in dots_xl.attrs['class']
    
    # Return all dots in a Div
    return Div(
        dots_xs,
        dots_sm,
        dots_md,
        dots_lg,
        dots_xl
    )

# Run the tests
test_loading_dots_fasthtml_examples()

test_func = test_loading_dots_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()

---

test_loading_ring_fasthtml_examples

def test_loading_ring_fasthtml_examples(
    
):

Test loading ring with all sizes from daisyUI v5 documentation.

def test_loading_ring_fasthtml_examples():
    """Test loading ring with all sizes from daisyUI v5 documentation."""
    from fasthtml.common import Span, Div
    
    # Loading ring extra small
    ring_xs = Span(cls=combine_classes(loading, loading_styles.ring, loading_sizes.xs))
    assert ring_xs.tag == "span"
    assert "loading" in ring_xs.attrs['class']
    assert "loading-ring" in ring_xs.attrs['class']
    assert "loading-xs" in ring_xs.attrs['class']
    
    # Loading ring small
    ring_sm = Span(cls=combine_classes(loading, loading_styles.ring, loading_sizes.sm))
    assert "loading" in ring_sm.attrs['class']
    assert "loading-ring" in ring_sm.attrs['class']
    assert "loading-sm" in ring_sm.attrs['class']
    
    # Loading ring medium
    ring_md = Span(cls=combine_classes(loading, loading_styles.ring, loading_sizes.md))
    assert "loading" in ring_md.attrs['class']
    assert "loading-ring" in ring_md.attrs['class']
    assert "loading-md" in ring_md.attrs['class']
    
    # Loading ring large
    ring_lg = Span(cls=combine_classes(loading, loading_styles.ring, loading_sizes.lg))
    assert "loading" in ring_lg.attrs['class']
    assert "loading-ring" in ring_lg.attrs['class']
    assert "loading-lg" in ring_lg.attrs['class']
    
    # Loading ring extra large
    ring_xl = Span(cls=combine_classes(loading, loading_styles.ring, loading_sizes.xl))
    assert "loading" in ring_xl.attrs['class']
    assert "loading-ring" in ring_xl.attrs['class']
    assert "loading-xl" in ring_xl.attrs['class']
    
    # Return all rings in a Div
    return Div(
        ring_xs,
        ring_sm,
        ring_md,
        ring_lg,
        ring_xl
    )

# Run the tests
test_loading_ring_fasthtml_examples()

test_func = test_loading_ring_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()

---

test_loading_ball_fasthtml_examples

def test_loading_ball_fasthtml_examples(
    
):

Test loading ball with all sizes from daisyUI v5 documentation.

def test_loading_ball_fasthtml_examples():
    """Test loading ball with all sizes from daisyUI v5 documentation."""
    from fasthtml.common import Span, Div
    
    # Loading ball extra small
    ball_xs = Span(cls=combine_classes(loading, loading_styles.ball, loading_sizes.xs))
    assert ball_xs.tag == "span"
    assert "loading" in ball_xs.attrs['class']
    assert "loading-ball" in ball_xs.attrs['class']
    assert "loading-xs" in ball_xs.attrs['class']
    
    # Loading ball small
    ball_sm = Span(cls=combine_classes(loading, loading_styles.ball, loading_sizes.sm))
    assert "loading" in ball_sm.attrs['class']
    assert "loading-ball" in ball_sm.attrs['class']
    assert "loading-sm" in ball_sm.attrs['class']
    
    # Loading ball medium
    ball_md = Span(cls=combine_classes(loading, loading_styles.ball, loading_sizes.md))
    assert "loading" in ball_md.attrs['class']
    assert "loading-ball" in ball_md.attrs['class']
    assert "loading-md" in ball_md.attrs['class']
    
    # Loading ball large
    ball_lg = Span(cls=combine_classes(loading, loading_styles.ball, loading_sizes.lg))
    assert "loading" in ball_lg.attrs['class']
    assert "loading-ball" in ball_lg.attrs['class']
    assert "loading-lg" in ball_lg.attrs['class']
    
    # Loading ball extra large
    ball_xl = Span(cls=combine_classes(loading, loading_styles.ball, loading_sizes.xl))
    assert "loading" in ball_xl.attrs['class']
    assert "loading-ball" in ball_xl.attrs['class']
    assert "loading-xl" in ball_xl.attrs['class']
    
    # Return all balls in a Div
    return Div(
        ball_xs,
        ball_sm,
        ball_md,
        ball_lg,
        ball_xl
    )

# Run the tests
test_loading_ball_fasthtml_examples()

test_func = test_loading_ball_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()

---

test_loading_bars_fasthtml_examples

def test_loading_bars_fasthtml_examples(
    
):

Test loading bars with all sizes from daisyUI v5 documentation.

def test_loading_bars_fasthtml_examples():
    """Test loading bars with all sizes from daisyUI v5 documentation."""
    from fasthtml.common import Span, Div
    
    # Loading bars extra small
    bars_xs = Span(cls=combine_classes(loading, loading_styles.bars, loading_sizes.xs))
    assert bars_xs.tag == "span"
    assert "loading" in bars_xs.attrs['class']
    assert "loading-bars" in bars_xs.attrs['class']
    assert "loading-xs" in bars_xs.attrs['class']
    
    # Loading bars small
    bars_sm = Span(cls=combine_classes(loading, loading_styles.bars, loading_sizes.sm))
    assert "loading" in bars_sm.attrs['class']
    assert "loading-bars" in bars_sm.attrs['class']
    assert "loading-sm" in bars_sm.attrs['class']
    
    # Loading bars medium
    bars_md = Span(cls=combine_classes(loading, loading_styles.bars, loading_sizes.md))
    assert "loading" in bars_md.attrs['class']
    assert "loading-bars" in bars_md.attrs['class']
    assert "loading-md" in bars_md.attrs['class']
    
    # Loading bars large
    bars_lg = Span(cls=combine_classes(loading, loading_styles.bars, loading_sizes.lg))
    assert "loading" in bars_lg.attrs['class']
    assert "loading-bars" in bars_lg.attrs['class']
    assert "loading-lg" in bars_lg.attrs['class']
    
    # Loading bars extra large
    bars_xl = Span(cls=combine_classes(loading, loading_styles.bars, loading_sizes.xl))
    assert "loading" in bars_xl.attrs['class']
    assert "loading-bars" in bars_xl.attrs['class']
    assert "loading-xl" in bars_xl.attrs['class']
    
    # Return all bars in a Div
    return Div(
        bars_xs,
        bars_sm,
        bars_md,
        bars_lg,
        bars_xl
    )

# Run the tests
test_loading_bars_fasthtml_examples()

test_func = test_loading_bars_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()

---

test_loading_infinity_fasthtml_examples

def test_loading_infinity_fasthtml_examples(
    
):

Test loading infinity with all sizes from daisyUI v5 documentation.

def test_loading_infinity_fasthtml_examples():
    """Test loading infinity with all sizes from daisyUI v5 documentation."""
    from fasthtml.common import Span, Div
    
    # Loading infinity extra small
    infinity_xs = Span(cls=combine_classes(loading, loading_styles.infinity, loading_sizes.xs))
    assert infinity_xs.tag == "span"
    assert "loading" in infinity_xs.attrs['class']
    assert "loading-infinity" in infinity_xs.attrs['class']
    assert "loading-xs" in infinity_xs.attrs['class']
    
    # Loading infinity small
    infinity_sm = Span(cls=combine_classes(loading, loading_styles.infinity, loading_sizes.sm))
    assert "loading" in infinity_sm.attrs['class']
    assert "loading-infinity" in infinity_sm.attrs['class']
    assert "loading-sm" in infinity_sm.attrs['class']
    
    # Loading infinity medium
    infinity_md = Span(cls=combine_classes(loading, loading_styles.infinity, loading_sizes.md))
    assert "loading" in infinity_md.attrs['class']
    assert "loading-infinity" in infinity_md.attrs['class']
    assert "loading-md" in infinity_md.attrs['class']
    
    # Loading infinity large
    infinity_lg = Span(cls=combine_classes(loading, loading_styles.infinity, loading_sizes.lg))
    assert "loading" in infinity_lg.attrs['class']
    assert "loading-infinity" in infinity_lg.attrs['class']
    assert "loading-lg" in infinity_lg.attrs['class']
    
    # Loading infinity extra large
    infinity_xl = Span(cls=combine_classes(loading, loading_styles.infinity, loading_sizes.xl))
    assert "loading" in infinity_xl.attrs['class']
    assert "loading-infinity" in infinity_xl.attrs['class']
    assert "loading-xl" in infinity_xl.attrs['class']
    
    # Return all infinities in a Div
    return Div(
        infinity_xs,
        infinity_sm,
        infinity_md,
        infinity_lg,
        infinity_xl
    )

# Run the tests
test_loading_infinity_fasthtml_examples()

test_func = test_loading_infinity_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()

---

test_loading_with_colors_fasthtml_examples

def test_loading_with_colors_fasthtml_examples(
    
):

Test loading with colors from daisyUI v5 documentation.

def test_loading_with_colors_fasthtml_examples():
    """Test loading with colors from daisyUI v5 documentation."""
    from fasthtml.common import Span, Div
    from cjm_fasthtml_daisyui.utilities.semantic_colors import text_dui
    
    # Loading spinner with primary color
    primary_spinner = Span(cls=combine_classes(loading, loading_styles.spinner, text_dui.primary))
    assert primary_spinner.tag == "span"
    assert "loading" in primary_spinner.attrs['class']
    assert "loading-spinner" in primary_spinner.attrs['class']
    assert "text-primary" in primary_spinner.attrs['class']
    
    # Loading spinner with secondary color
    secondary_spinner = Span(cls=combine_classes(loading, loading_styles.spinner, text_dui.secondary))
    assert "loading" in secondary_spinner.attrs['class']
    assert "loading-spinner" in secondary_spinner.attrs['class']
    assert "text-secondary" in secondary_spinner.attrs['class']
    
    # Loading spinner with accent color
    accent_spinner = Span(cls=combine_classes(loading, loading_styles.spinner, text_dui.accent))
    assert "loading" in accent_spinner.attrs['class']
    assert "loading-spinner" in accent_spinner.attrs['class']
    assert "text-accent" in accent_spinner.attrs['class']
    
    # Loading spinner with neutral color
    neutral_spinner = Span(cls=combine_classes(loading, loading_styles.spinner, text_dui.neutral))
    assert "loading" in neutral_spinner.attrs['class']
    assert "loading-spinner" in neutral_spinner.attrs['class']
    assert "text-neutral" in neutral_spinner.attrs['class']
    
    # Loading spinner with info color
    info_spinner = Span(cls=combine_classes(loading, loading_styles.spinner, text_dui.info))
    assert "loading" in info_spinner.attrs['class']
    assert "loading-spinner" in info_spinner.attrs['class']
    assert "text-info" in info_spinner.attrs['class']
    
    # Loading spinner with success color
    success_spinner = Span(cls=combine_classes(loading, loading_styles.spinner, text_dui.success))
    assert "loading" in success_spinner.attrs['class']
    assert "loading-spinner" in success_spinner.attrs['class']
    assert "text-success" in success_spinner.attrs['class']
    
    # Loading spinner with warning color
    warning_spinner = Span(cls=combine_classes(loading, loading_styles.spinner, text_dui.warning))
    assert "loading" in warning_spinner.attrs['class']
    assert "loading-spinner" in warning_spinner.attrs['class']
    assert "text-warning" in warning_spinner.attrs['class']
    
    # Loading spinner with error color
    error_spinner = Span(cls=combine_classes(loading, loading_styles.spinner, text_dui.error))
    assert "loading" in error_spinner.attrs['class']
    assert "loading-spinner" in error_spinner.attrs['class']
    assert "text-error" in error_spinner.attrs['class']
    
    # Return all colored spinners in a Div
    return Div(
        primary_spinner,
        secondary_spinner,
        accent_spinner,
        neutral_spinner,
        info_spinner,
        success_spinner,
        warning_spinner,
        error_spinner
    )

# Run the tests
test_loading_with_colors_fasthtml_examples()

test_func = test_loading_with_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()