Progress Indication

Signaling background request activity

Properties: Types

• Ephemeral indicator: Temporary element overwritten by the response

• Consistent indicator: Persistent tag toggled via hx-indicator

Workflow: How to add Ephemeral Indicator

1. Place placeholder inside the hx-target container:

   <div id="ping-result">
       <c-svg.spinner />
   </div>
   

2. Trigger request to swap placeholder with HTML:

    <div hx-get="{% url 'get-result' %}"
            hx-trigger="intersect once"
            hx-target="#result">
        <div id="result">
            <c-svg.spinner />
        </div>
    </div>
   

Workflow: How to add Consistent Indicator

1. Create an element with htmx-indicator class and a unique ID:

   <div id="google-progress-bar" class="htmx-indicator fixed top-0 left-0 w-full h-1 z-50">
       <div class="h-full bg-gray-500 animate-google-progress"></div>
   </div>
   

2. Add the keyframe animation to ./static/css/styles.css:

   @keyframes googleProgress {
       0% { left: 0%; width: 0%; opacity: 0.3; }
       50% { left: 0%; width: 100%; opacity: 0.9; }
       100% { left: 100%; width: 0%; opacity: 0.3; }
   }
   
   .animate-google-progress {
       position: relative;
       animation: googleProgress 1.2s ease-in-out infinite;
   }
   

3. Add hx-indicator="#bar" to the element initiating the request:

   <button hx-get="/data/" hx-indicator="#google-progress-bar">
       Load Data
   </button>