Spinner
An animated loading indicator built from a spinning icon. Resize and recolor it with utility classes.
Source Tailwind CSS
Processing payment...
$100.00
package showcase
import (
"github.com/templui/templui/components/item"
"github.com/templui/templui/components/spinner"
)
templ SpinnerDefault() {
<div class="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
@item.Item(item.Props{Variant: item.VariantMuted}) {
@item.Media() {
@spinner.Spinner()
}
@item.Content() {
@item.Title(item.TitleProps{Class: "line-clamp-1"}) {
Processing payment...
}
}
@item.Content(item.ContentProps{Class: "flex-none justify-end"}) {
<span class="text-sm tabular-nums">$100.00</span>
}
}
</div>
}
Installation
templui add spinner
import "github.com/templui/templui/components/spinner"
Customization
package showcase
import (
"github.com/templui/templui/components/icon"
"github.com/templui/templui/components/spinner"
)
templ SpinnerCustom() {
@spinner.Spinner(spinner.Props{Icon: icon.Loader})
}
Examples
Size
package showcase
import "github.com/templui/templui/components/spinner"
templ SpinnerSize() {
<div class="flex items-center gap-6">
@spinner.Spinner(spinner.Props{Class: "size-3"})
@spinner.Spinner(spinner.Props{Class: "size-4"})
@spinner.Spinner(spinner.Props{Class: "size-6"})
@spinner.Spinner(spinner.Props{Class: "size-8"})
</div>
}
Button
package showcase
import (
"github.com/templui/templui/components/button"
"github.com/templui/templui/components/spinner"
)
templ SpinnerButton() {
<div class="flex flex-col items-center gap-4">
@button.Button(button.Props{
Disabled: true,
Size: button.SizeSm,
}) {
@spinner.Spinner(spinner.Props{
Attributes: templ.Attributes{"data-icon": "inline-start"},
})
Loading...
}
@button.Button(button.Props{
Variant: button.VariantOutline,
Disabled: true,
Size: button.SizeSm,
}) {
@spinner.Spinner(spinner.Props{
Attributes: templ.Attributes{"data-icon": "inline-start"},
})
Please wait
}
@button.Button(button.Props{
Variant: button.VariantSecondary,
Disabled: true,
Size: button.SizeSm,
}) {
@spinner.Spinner(spinner.Props{
Attributes: templ.Attributes{"data-icon": "inline-start"},
})
Processing
}
</div>
}
Badge
Syncing Updating Processing
package showcase
import (
"github.com/templui/templui/components/badge"
"github.com/templui/templui/components/spinner"
)
templ SpinnerBadge() {
<div class="flex items-center gap-4 [--radius:1.2rem]">
@badge.Badge() {
@spinner.Spinner(spinner.Props{
Class: "size-3",
Attributes: templ.Attributes{"data-icon": "inline-start"},
})
Syncing
}
@badge.Badge(badge.Props{Variant: badge.VariantSecondary}) {
@spinner.Spinner(spinner.Props{
Class: "size-3",
Attributes: templ.Attributes{"data-icon": "inline-start"},
})
Updating
}
@badge.Badge(badge.Props{Variant: badge.VariantOutline}) {
@spinner.Spinner(spinner.Props{
Class: "size-3",
Attributes: templ.Attributes{"data-icon": "inline-start"},
})
Processing
}
</div>
}
Input Group
Validating...
package showcase
import (
"github.com/templui/templui/components/button"
"github.com/templui/templui/components/icon"
"github.com/templui/templui/components/inputgroup"
"github.com/templui/templui/components/spinner"
)
templ SpinnerInputGroup() {
<div class="flex w-full max-w-md flex-col gap-4">
@inputgroup.InputGroup() {
@inputgroup.Input(inputgroup.InputProps{
Placeholder: "Send a message...",
Disabled: true,
})
@inputgroup.Addon(inputgroup.AddonProps{Align: inputgroup.AlignInlineEnd}) {
@spinner.Spinner()
}
}
@inputgroup.InputGroup() {
@inputgroup.Textarea(inputgroup.TextareaProps{
Placeholder: "Send a message...",
Disabled: true,
})
@inputgroup.Addon(inputgroup.AddonProps{Align: inputgroup.AlignBlockEnd}) {
@spinner.Spinner()
Validating...
@inputgroup.Button(inputgroup.ButtonProps{
Variant: button.VariantDefault,
Class: "ml-auto",
}) {
@icon.ArrowUp()
<span class="sr-only">Send</span>
}
}
}
</div>
}
Empty
Processing your request
Please wait while we process your request. Do not refresh the page.
package showcase
import (
"github.com/templui/templui/components/button"
"github.com/templui/templui/components/empty"
"github.com/templui/templui/components/spinner"
)
templ SpinnerEmpty() {
@empty.Empty(empty.Props{Class: "w-full"}) {
@empty.Header() {
@empty.Media(empty.MediaProps{Variant: empty.MediaVariantIcon}) {
@spinner.Spinner()
}
@empty.Title() {
Processing your request
}
@empty.Description() {
Please wait while we process your request. Do not refresh the page.
}
}
@empty.Content() {
@button.Button(button.Props{
Variant: button.VariantOutline,
Size: button.SizeSm,
}) {
Cancel
}
}
}
}
API Reference
Required parameter
Hover for description
Spinner
Renders a spinning loader icon with an accessible status role.
| Name | Type | Default |
|---|---|---|
Optional HTML id for the spinner element. | | - |
Classes applied to the icon. Use size-* and text-* to resize and recolor. | | |
Accessible name announced to screen readers. | | |
Optionally overrides the spinning icon (e.g. icon.Loader, icon.LoaderPinwheel). | | |
Additional HTML attributes for the wrapper element. | | - |