Skip to content
Gx
GitHub

Spinner

An indicator for an unknown wait.

Open the preview in a new tab 

<spinner.Spinner />

Installation

Run the command in the app module.

Terminal
gx add spinner

The command writes these files.

File Path in the app
Spinner.gx ui/spinner/Spinner.gx
Spinner.fixtures.go ui/spinner/Spinner.fixtures.go
styles.go ui/spinner/styles.go

Copy each file to its path in the app. Change each import of a registry package to the path of that package in the app.

ui/spinner/Spinner.gx
package spinner

props {
  // Label is the accessible name of the spinner. An empty value is Loading.
  Label string = "Loading"
  // Class adds classes to the root element.
  Class string = ""
  // Attrs adds HTML attributes to the root element.
  Attrs gx.Attrs = nil
}

<svg role="status" aria-label={p.label()} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={gx.Cx("size-4 animate-spin", p.Class)} {...p.Attrs}>
  <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
</svg>
ui/spinner/Spinner.fixtures.go
package spinner

import "github.com/alternayte/gx"

var SpinnerFixtures = gx.Fixtures[SpinnerProps]{
	"Default": {},
	"Large":   {Class: "size-8"},
	"Muted":   {Class: "size-6 text-muted-foreground", Label: "Saving"},
}
ui/spinner/styles.go
package spinner

// label returns the accessible name; a zero value is Loading.
func (p SpinnerProps) label() string {
	if p.Label == "" {
		return "Loading"
	}
	return p.Label
}

Usage

An indicator for work in progress.

<spinner.Spinner />
<spinner.Spinner class="size-6 text-muted-foreground" label="Saving" />
<button.Button attrs={gx.Attrs{gx.Bool("disabled", true)}}><spinner.Spinner />Saving</button.Button>

The spinner is the loader icon with a rotation. Set the size and the colour with Class. Label is the name a screen reader announces. The default is Loading.

Examples

Default

Open the preview in a new tab 

<spinner.Spinner />

Large

Open the preview in a new tab 

<spinner.Spinner class="size-8" />

Muted

Open the preview in a new tab 

<spinner.Spinner class="size-6 text-muted-foreground" label="Saving" />

API reference

A tag sets a prop by its name with a lower-case first letter: Class is class.

spinner.Spinner

Prop Type Default Description
Label string "Loading" Label is the accessible name of the spinner. An empty value is Loading.
Class string "" Class adds classes to the root element.
Attrs gx.Attrs nil Attrs adds HTML attributes to the root element.

Do and do not

Do

  • Show the spinner next to the text of the action that is in progress.
  • Change Label when the work is not a load.

Don't

  • Do not show a spinner for a wait that has a known length. Use a progress bar.
  • Do not block the whole page with a spinner.

Keyboard

Key Action
None The component is static.