Skip to content
STYLESCAPE

htmx

Styles for the classes htmx toggles while a request runs and content is swapped. The examples set the classes by hand to show each state. Set htmx.config.includeIndicatorStyles = false so htmx's injected indicator CSS doesn't override the motion tokens. Transitions are dropped under prefers-reduced-motion: reduce.

Indicator

.htmx-indicator is invisible (and hidden from assistive tech) until the element or an ancestor has .htmx-request. With hx-indicator="#id", htmx puts .htmx-request on that element instead.

HTML 
<button class="ss-c-button" type="button" hx-post="/save">
            Save
            <span class="htmx-indicator ss-c-spinner ss-c-spinner--sm" role="status" aria-label="Saving"></span>
        </button>

        <button class="ss-c-button htmx-request" type="button" hx-post="/save">
            Save
            <span class="htmx-indicator ss-c-spinner ss-c-spinner--sm" role="status" aria-label="Saving"></span>
        </button>

Busy form

hx-disabled-elt disables the submit button during the request; it keeps its label, dims and shows a progress cursor.

Searching…
HTML 
<form class="ss-c-form htmx-request" hx-post="/search" hx-disabled-elt="find button">
            <div class="ss-c-form__field">
                <label class="ss-c-form__label" for="htmx-q">Search</label>
                <input class="ss-c-input" id="htmx-q" name="q" type="search" value="harbour">
            </div>
            <div class="ss-c-form__actions">
                <button class="ss-c-button ss-c-button--primary" type="submit" disabled>Search</button>
                <span class="htmx-indicator" role="status">Searching…</span>
            </div>
        </form>

Fragment

Put ss-c-fragment on a swap target. While the request runs (hx-indicator pointing at it, or aria-busy="true") the old content dims and ignores clicks; with a swap delay (hx-swap="innerHTML swap:200ms settle:200ms") it fades out on .htmx-swapping and the new content fades in.

12 results for “harbour”.

12 results for “harbour” (loading new results).

HTML 
<div class="ss-c-fragment" id="results" aria-live="polite">
            <p>12 results for “harbour”.</p>
        </div>

        <div class="ss-c-fragment htmx-request" aria-busy="true">
            <p>12 results for “harbour” (loading new results).</p>
        </div>