htmx: Loading indicator

It’s common to have a loading indicator show up when we’re waiting for the server response.

To do that, embed an element with class htmx-indicator into the element that triggers the request.

You can use a simple loading... text:

<button 
  hx-get='/data' 
  hx-swap='innerHTML' 
  hx-target='#data'>
  Load fresh data
  <p class='htmx-indicator'>loading...</p>
</button>

Or an image:

<button 
  hx-get='/data' 
  hx-swap='innerHTML' 
  hx-target='#data'>
  Load fresh data
  <img class='htmx-indicator' src='/spinner.gif' />
</button>

Lessons in this unit:

0: Introduction
1: Why htmx
2: The core idea of htmx
3: Installing htmx
4: Doing a GET request
5: Swap
6: POST request
7: Targets
8: ▶︎ Loading indicator
9: Confirming actions, and prompts
10: Triggers
11: Request headers
12: Response headers
13: Events
Want to learn more? Check out our courses