How to get hx_indicator working?

[BurgosNY]

Hello. I'm exploring the library, having a great time so far. I've worked with HTMX in a Flask application previously, but one thing I couldn't get to work here. The htmx_indicator. If I want to show like a blinking svg while there is a function working in the background? Using htmx_indicator with an ID doesn't work exactly like I want, even if I add custom styling (from here). Anyone tried it already?

Thanks!

[BurgosNY]

So, with Flask, if I have a button that I click and calls an hx-post:

Button("🤖 Processar",
                       hx_target="#answer",
                       hx_post="/question",
                       hx_indicator="#loading"),

And in this div it would show the meta-icon.svg while it still running (an API call), and this would later be replaced by the output of the function in the route /question. If I take the hx_indicator part out it runs, but I wanted some indication that something is going on while it's processing.

            Div(
                Img(src="assets/img/meta-icon.svg", cls="htmx-indicator blinking",
                    width="16", height="16", id="loading"),
                id="answer"
            ),

[gautam-e]

I remember having some trouble here and can't remember all details but this is what worked for me (I gave hx_indicator a class and not an id though):

Div(
        Button("Seminare finden", hx_post="/courses", hx_params="profile", hx_target="#output-wrapper", hx_indicator=".htmx-indicator", hx_push_url="false"), 
        Button("Lernpfad erstellen", hx_post="/learning_path", hx_params="profile", hx_target="#output-wrapper", hx_indicator=".htmx-indicator", hx_push_url="false"), 
        Progress(_class="htmx-indicator"),
        _class="grid"
)

[BurgosNY]

Thanks, @gautam-e

This ended up working (the id, not the class), for some reason. The only thing that I can't get to work is the "blinking" part.

                Button("🤖 Processar",
                       hx_target="#answer",
                       hx_post="/question",
                       hx_indicator="#indicator"),
            ),
            Hr(),
            Div(Div(Img(src="assets/img/meta-icon.svg", width="16", height="16", cls="blinking htmx-indicator", id="indicator")),
                id="answer")

The style.css (that is correctly loading, as the icon doesn't appear)

@keyframes blinker {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
  }
  
.blinking {
    animation: blinker 1s linear infinite;
}

.htmx-indicator{
    opacity:0;
    transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator{
    opacity:1;

}