T templcn/ui
Componentprogress

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Preview

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Installation

Add this component to your project using the CLI.

templcn add progress

Usage

1. Import the component in your Go or templ file:

import "your-module/ui"

2. Use the component in your template:

@ui.Progress(ui.ProgressProps{Value: 60, DOMProps: ui.DOMProps{Class: "w-[60%]"}})

Composition

Use these parts together to build the component.

Progress

Examples

Named examples and common variations.

Various values

Progress bars at 20%, 60%, and 100%.

API Reference
PropTypeDefaultDescription
Valuefloat640Current progress value.
Maxfloat64100Maximum value.
View source
package ui

import (
	"context"
	"fmt"
	"io"
	"strconv"

	"github.com/a-h/templ"
)

type ProgressProps struct {
	DOMProps
	Value float64
	Max   float64
}

func Progress(props ProgressProps) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		max := props.Max
		if max <= 0 {
			max = 100
		}
		value := props.Value
		if value < 0 {
			value = 0
		}
		if value > max {
			value = max
		}
		attrs := attrsFromDOMProps(props.DOMProps, "progress", "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full")
		attrs["role"] = "progressbar"
		attrs["aria-valuemin"] = "0"
		attrs["aria-valuemax"] = strconv.FormatFloat(max, 'f', -1, 64)
		attrs["aria-valuenow"] = strconv.FormatFloat(value, 'f', -1, 64)

		bar := templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
			barAttrs := templ.Attributes{
				"data-slot": "progress-indicator",
				"class":     "h-full w-full flex-1 bg-primary transition-all",
				"style":     fmt.Sprintf("transform: translateX(-%s%%);", strconv.FormatFloat(100-(value/max*100), 'f', -1, 64)),
			}
			return renderElement(ctx, w, "div", barAttrs, nil)
		})

		return renderElement(ctx, w, "div", attrs, bar)
	})
}
Next: Radio Group