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

Variants

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)
    	}
    }

API Reference

Required parameter
Hover for description

Progress

Visual progress indicator component for showing completion status of tasks or processes.

Name Type Default
ID
string
-
Class
string
-
Attributes
templ.Attributes
-
Value
int
0
Max
int
0
Size
Size
-
Variant
Variant
-
BarClass
string
-
Label
string
-
ShowValue
bool
false