Spinner

An indicator that can be used to show a loading state.

Installation#

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Spinner
Copy

Usage#

Copy<Spinner />

Customization#

You can replace the default spinner icon with any other icon by editing the Spinner component.

Copy@module("tailwind-merge")
external cn: (string, option<string>) => string = "twMerge"
 
@react.component
let make = (~className=?, ~dataIcon=?, ~dataSlot=?) => {
  <LoaderIcon
    ?dataIcon
    ?dataSlot
    role="status"
    ariaLabel="Loading"
    className={cn("size-4 animate-spin", className)}
  />
}
 

Examples#

Size#

Use the size-* utility class to change the size of the spinner.

Button#

Add a spinner to a button to indicate a loading state. Remember to use the dataIcon=InlineStart prop to add the spinner to the start of the button and the dataIcon=InlineEnd prop to add the spinner to the end of the button.

Badge#

Add a spinner to a badge to indicate a loading state. Remember to use the dataIcon=InlineStart prop to add the spinner to the start of the badge and the dataIcon=InlineEnd prop to add the spinner to the end of the badge.

Input Group#

Empty#