Progress Bar

This example shows how to implement a smoothly scrolling progress bar.

return Div(
	hx.Target(htmx.TargetThis),
	hx.Swap(swap.OuterHTML),
	H3(g.Text("Start Progress")),
	Button(
		hx.Post("/examples/gomponents/progress-bar/job/"),
		g.Text("Start Job"),
	),
)

This div is then replaced with a new div containing status and a progress bar that reloads itself every 600ms:

return Div(
	hx.Trigger(shared.TriggerDone),
	hx.Get("/examples/gomponents/progress-bar/job/%d/", jobID),
	hx.Swap(swap.OuterHTML),
	hx.Target(htmx.TargetThis),
	H3(Role("status"), ID("pblabel"), TabIndex("-1"), AutoFocus(),
		g.Text(fmt.Sprintf("Job %d Running", jobID)),
	),
	ProgressFetcher(jobID, progress),
)

func ProgressFetcher(jobID int64, progress int) g.Node {
	return Div(
		hx.Get("/examples/gomponents/progress-bar/job/%d/progress/", jobID),
		hx.TriggerExtended(trigger.Every(time.Millisecond*600)),
		hx.Target(htmx.TargetThis),
		hx.Swap(swap.InnerHTML),

		ProgressBar(progress),
	)
}

func ProgressBar(progress int) g.Node {
	return Div(
		Class("progress"),
		Role("progressbar"),
		Aria("valuemin", "0"),
		Aria("valuemax", "100"),
		Aria("valuenow", strconv.Itoa(progress)),
		Aria("labelledby", "pblabel"),
		Div(
			ID("pb"),
			Class("progress-bar"),
			StyleAttr(fmt.Sprintf(`width: %d%%`, progress)),
		),
	)
}

This progress bar is updated every 600 milliseconds, with thewidthstyle attribute and aria-valuenowattribute set to current progress value. Because there is an id on the progress bar div, htmx will smoothly transition between requests by settling the style attribute into its new value. This, when coupled with CSS transitions, makes the visual transition continuous rather than jumpy.

Finally, when the process is complete, a server returns aHX-Trigger: doneheader, which triggers an update of the UI to “Complete” state with a restart button added to the UI (we are using theclass-toolsextension in this example to add fade-in effect on the button):

return Div(
	hx.Target(htmx.TargetThis),
	hx.Swap(swap.OuterHTML),
	H3(Role("status"), ID("pblabel"), TabIndex("-1"), AutoFocus(),
		g.Text(fmt.Sprintf("Job %d Complete", jobID)),
	),
	ProgressBar(progress),
	Button(
		ID("restart-btn"),
		hx.Post("/examples/gomponents/progress-bar/job/"),
		classtools.Classes(hx,
			classtools.Add("show", time.Millisecond*600),
		),
		g.Text("Restart Job"),
	),
)

This example uses styling cribbed from the bootstrap progress bar:

.progress-bar-demo .progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar-demo .progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #337ab7;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition: width 0.6s ease;
  -o-transition: width 0.6s ease;
  transition: width 0.6s ease;
}

Demo