Progress

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