Progress
Progress indicators inform users about the status of ongoing processes.
TailwindCSS
Usage
@components.Progress(components.ProgressProps{...})
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:
// Client-side JavaScript
const form = document.querySelector("#upload-form");
form.addEventListener("submit", (e) => {
e.preventDefault();
const formData = new FormData(form);
const xhr = new XMLHttpRequest();
// Update progress bar with upload progress
xhr.upload.addEventListener("progress", (event) => {
if (event.lengthComputable) {
const percent = Math.round((event.loaded / event.total) * 100);
// Update progress bar width
document.querySelector("#progress-bar").style.width = percent + "%";
// Update percentage text
document.querySelector("#progress-value").textContent = percent + "%";
}
});
xhr.open("POST", "/upload");
xhr.send(formData);
});
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, HxGet: "/api/job/123/progress", HxTrigger: "every 2s", HxTarget: "#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) } }