AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Spinner
An indicator that can be used to show a loading state.
Loading...Loading...
templ
templ SpinnerDemo() {
<div class="flex items-center gap-4">
@ui.Spinner("", nil)
@ui.Spinner("h-6 w-6", templ.Attributes{"aria-label": "Loading large"})
@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeDefault, "", templ.Attributes{"disabled": true}) {
@ui.Spinner("mr-2 h-4 w-4", nil)
Please wait
}
</div>
}