Skip to content

HTMX Compatibility

Built-in support for HTMX lifecycle classes. No extra CSS needed.

Indicator (auto-spinner)

Empty .htmx-indicator gets a CSS spinner 
<div class="htmx-request">
  <span class="htmx-indicator"></span>
  <span>Loading…</span>
</div>

Form loading state

<form class="htmx-request">
  <label for="name">Name</label>
  <input type="text" id="name" value="Jane Smith">
  <button type="submit">Submitting…</button>
</form>

Settle flash & Error shake

Flash target

Shake target

<!-- Settle flash: fade-in + outline highlight -->
<div class="htmx-settling">…</div>

<!-- Error shake: red outline + shake animation -->
<div class="htmx-error">…</div>

HTMX classes reference

ClassWhenFAP CSS effect
.htmx-indicatorDuring requestShow/hide with fade; auto-spinner when empty
.htmx-requestOn requesting elementDim + wait cursor; forms disable inputs
.htmx-swappingBefore swapFade out
.htmx-settlingAfter swapFade in + outline flash
.htmx-addedNew elementsFade-in animation
.htmx-errorFailed requestRed outline + shake

Usage

<!-- Skeleton loading -->
<div hx-get="/api/data" hx-trigger="load" aria-busy="true">
  Loading…
</div>

<!-- Inline editing -->
<p contenteditable="true"
   hx-post="/api/update"
   hx-trigger="blur"
   hx-swap="outerHTML">
  Click to edit
</p>