Progress
Progress indicators inform users about the status of ongoing processes.
Installation
Install the component
templui add progress
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) } }