package showcase
import "github.com/axzilla/templui/internal/components/spinner"
templ SpinnerDefault() {
@spinner.Spinner(spinner.Props{
Size: spinner.SizeMd,
})
}
Installation
templui add spinner
Examples
Sizes
package showcase
import "github.com/axzilla/templui/internal/components/spinner"
templ SpinnerSizes() {
<div class="flex flex-wrap items-end justify-center gap-8">
@spinner.Spinner(spinner.Props{
Size: spinner.SizeSm,
})
@spinner.Spinner(spinner.Props{
Size: spinner.SizeMd,
})
@spinner.Spinner(spinner.Props{
Size: spinner.SizeLg,
})
</div>
}
Colors
package showcase
import "github.com/axzilla/templui/internal/components/spinner"
templ SpinnerColors() {
<div class="flex flex-wrap items-end justify-center gap-8">
@spinner.Spinner(spinner.Props{
Size: spinner.SizeMd,
Color: "text-red-500",
})
@spinner.Spinner(spinner.Props{
Size: spinner.SizeMd,
Color: "text-green-500",
})
@spinner.Spinner(spinner.Props{
Size: spinner.SizeMd,
Color: "text-blue-500",
})
</div>
}
In Button
package showcase
import (
"github.com/axzilla/templui/internal/components/button"
"github.com/axzilla/templui/internal/components/spinner"
)
templ SpinnerInButton() {
@button.Button(button.Props{
Attributes: templ.Attributes{
"disabled": "true",
},
}) {
<div class="flex items-center gap-2">
@spinner.Spinner(spinner.Props{
Size: spinner.SizeSm,
Color: "text-primary-foreground",
})
<span>Loading</span>
</div>
}
}