Global loading spinner using HTMX & Bootstrap 5

What HTMX does when doing a request

As htmx's doc says:

The htmx-request class is applied to the appropriate elements

and on the other part of the doc also says:

If you want the htmx-request class added to a different element, you can use the hx-indicator attribute with a CSS selector to do so

So, what we need to do are

1. specify hx-indicator to any element that does trigger htmx request or
2. wrap all of our content in an element (let's say a DIV) then specify hx-indicator on it, this is possible because hx-indicator value will be inherited into any child element.

The second option is the thing we are going to do here.

Using Bootstrap's spinner

We will customize the behaviour of bootstrap's spinner.

<!-- this is our loading spinner -->
<div class="loader">
    <div class="spinner-border text-dark" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
</div>
<!-- end of loading spinner -->


<!-- the wrapper of the contents -->
<div hx-indicator=".loader">
  <!-- contents goes here -->
</div>
<!-- end of content wrapper -->

Notice that the value of hx-indicator is a CSS Selector

When there is no htmx request, the loader should not appear, hence we set its display to be none.

.loader {
  display:none;
}

When an htmx request is being issued, the loader should appear on top of screen and it should be vertically & horizantally centered.

.htmx-request.loader {
  display:inline;
  position: fixed;
  z-index: 9999;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.htmx-request.loader div {
  height: 100%;
  width: 100%;
}

And tada, here is the result of our simple loading spinner.

That's it for now. For full code you could visit my github repo here. The full demonstration could also be visited on heroku. To login, use these credentials:

• username: demo
• password: Demo123

Note: Due to heroku does not provide free hosting anymore, thus the link does not work anymore.

External links

Here are the links I found useful for another use cases of HTMX (will be added soon):

• django-htmx-modal-form