The loading-states Extension

This extension allows you to easily manage loading states while a request is in flight, including disabling elements, and adding and removing CSS classes.

πŸ”—Install

<script src="https://unpkg.com/htmx.org/dist/ext/loading-states.js"></script>

πŸ”—Usage

Add the hx-ext="loading-states" attribute to the body tag or to any parent element containing your htmx attributes.

Add the following class to your stylesheet to make sure elements are hidden by default:

[data-loading] {
  display: none;
}

πŸ”—Supported attributes