templUI Pro coming soon  

50% OFF Join Waitlist

Progress

Progress indicators inform users about the status of ongoing processes.

Source
TailwindCSS
Vanilla JS

Installation

  1. Install the component

    templui add progress
  2. Add the JavaScript to your layout

    @progress.Script()
    

    Call this template in your base layout file (e.g., in the <head> section).

Examples

Sizes

Colors

Integration Patterns

The Progress component can be integrated in different ways depending on your requirements:

File Uploads

For file uploads, use the browser's XMLHttpRequest or fetch API with progress events:

Multi-step Forms

For multi-step forms, you can use either client-side calculations or HTMX for server-side validation between steps:

// Client-side approach
<div data-current-step="1" data-total-steps="4">
    @components.Progress(components.ProgressProps{
        Value: 25, // 1 of 4 steps = 25%
        Label: "Step 1 of 4",
        ShowValue: true,
    })
    
    // Form steps
</div>

// HTMX approach
<button 
    hx-get="/form/step/2" 
    hx-target="#form-container"
    class="px-4 py-2 bg-primary text-white rounded"
>
    Next
</button>

Background Processes

For tracking background processes, choose between:

  • HTMX Polling: Simple approach, good for processes under a few minutes

    @components.Progress(components.ProgressProps{
    	Value: initialValue,
    	Label: "Processing...",
    	ShowValue: true,
    	Attributes: templ.Attributes{
    		"hx-get":     "/api/job/123/progress",
    		"hx-trigger": "every 2s",
    		"hx-target":  "#progress-container",
    	},
    })
  • Server-Sent Events (SSE): For real-time updates and longer processes

    // Server-side Go code
    func SSEHandler(w http.ResponseWriter, r *http.Request) {
    	// Set SSE headers
    	w.Header().Set("Content-Type", "text/event-stream")
    	w.Header().Set("Cache-Control", "no-cache")
    	w.Header().Set("Connection", "keep-alive")
    	
    	// Send progress updates
    	for i := 0; i <= 100; i += 10 {
    		fmt.Fprintf(w, "data: {\"progress\": %d}\n\n", i)
    		w.(http.Flusher).Flush()
    		time.Sleep(1 * time.Second)
    	}
    }