Global progress bar for htmx

Table of contents

Introduction

One of the cool features of htmx is that it lets you add a progress bar to your ajax requests with ease. The request-indicator (hx-indicator) toggles the target element’s (progress indicator element) opacity to 1 during the request and to 0 when the request ends.

When htmx issues a request, it will put a htmx-request class onto an element (either the requesting element or another element, if specified). The htmx-request class will cause a child element with the htmx-indicator class to transition to an opacity of 1, showing the indicator. - Docs

This post is about adding a global progress bar for htmx. This way, you can define the progress bar once and attach it to all your htmx requests.

Progress bar

Add the following progress bar to the top of the base template.

<div class="progress" style="height: 3px; background-color: white;">
  <div class="indeterminate" style="background-color: red;"></div>
</div>

The associated css:

https://gist.github.com/amalshaji/7f0b96ceb9fb53d9dd2b25fa7057ec47

Then, add a progress attribute to all your htmx requests hx-indicator=".progress"

Demo