Spinner

Lucide

Installation

npx kibo-ui@latest add spinner

Features

Drag and drop items between groups
Customize the item contents

Examples

Variants

Customization

Props

The spinner is made up of the following subcomponents:

Spinner

The Spinner component is used to display a spinner.

Prop	Type	Default
`size?`	`string \| number`	-
`absoluteStrokeWidth?`	`boolean`	-
`ref?`	`((instance: SVGSVGElement \| null) => void \| (() => VoidOrUndefinedOnly)) \| RefObject<SVGSVGElement \| null>`	-
`key?`	`Key`	-
`suppressHydrationWarning?`	`boolean`	-
`className?`	`string`	-
`color?`	`string`	-
`height?`	`string \| number`	-
`id?`	`string`	-
`lang?`	`string`	-
`max?`	`string \| number`	-
`media?`	`string`	-
`method?`	`string`	-
`min?`	`string \| number`	-
`name?`	`string`	-
`style?`	`CSSProperties`	-
`target?`	`string`	-
`type?`	`string`	-
`width?`	`string \| number`	-
`role?`	`AriaRole`	-
`tabIndex?`	`number`	-
`crossOrigin?`	`CrossOrigin`	-
`accentHeight?`	`string \| number`	-
`accumulate?`	`"none" \| "sum"`	-
`additive?`	`"sum" \| "replace"`	-
`alignmentBaseline?`	`"alphabetic" \| "hanging" \| "ideographic" \| "mathematical" \| "auto" \| "baseline" \| "before-edge" \| "text-before-edge" \| "middle" \| "central" \| "after-edge" \| "text-after-edge" \| "inherit"`	-
`allowReorder?`	`"no" \| "yes"`	-
`alphabetic?`	`string \| number`	-
`amplitude?`	`string \| number`	-
`arabicForm?`	`"initial" \| "medial" \| "terminal" \| "isolated"`	-
`ascent?`	`string \| number`	-
`attributeName?`	`string`	-
`attributeType?`	`string`	-
`autoReverse?`	`Booleanish`	-
`azimuth?`	`string \| number`	-
`baseFrequency?`	`string \| number`	-
`baselineShift?`	`string \| number`	-
`baseProfile?`	`string \| number`	-
`bbox?`	`string \| number`	-
`begin?`	`string \| number`	-
`bias?`	`string \| number`	-
`by?`	`string \| number`	-
`calcMode?`	`string \| number`	-
`capHeight?`	`string \| number`	-
`clip?`	`string \| number`	-
`clipPath?`	`string`	-
`clipPathUnits?`	`string \| number`	-
`clipRule?`	`string \| number`	-
`colorInterpolation?`	`string \| number`	-
`colorInterpolationFilters?`	`"auto" \| "inherit" \| "sRGB" \| "linearRGB"`	-
`colorProfile?`	`string \| number`	-
`colorRendering?`	`string \| number`	-
`contentScriptType?`	`string \| number`	-
`contentStyleType?`	`string \| number`	-
`cursor?`	`string \| number`	-
`cx?`	`string \| number`	-
`cy?`	`string \| number`	-
`d?`	`string`	-
`decelerate?`	`string \| number`	-
`descent?`	`string \| number`	-
`diffuseConstant?`	`string \| number`	-
`direction?`	`string \| number`	-
`display?`	`string \| number`	-
`divisor?`	`string \| number`	-
`dominantBaseline?`	`string \| number`	-
`dur?`	`string \| number`	-
`dx?`	`string \| number`	-
`dy?`	`string \| number`	-
`edgeMode?`	`string \| number`	-
`elevation?`	`string \| number`	-
`enableBackground?`	`string \| number`	-
`end?`	`string \| number`	-
`exponent?`	`string \| number`	-
`externalResourcesRequired?`	`Booleanish`	-
`fill?`	`string`	-
`fillOpacity?`	`string \| number`	-
`fillRule?`	`"inherit" \| "nonzero" \| "evenodd"`	-
`filter?`	`string`	-
`filterRes?`	`string \| number`	-
`filterUnits?`	`string \| number`	-
`floodColor?`	`string \| number`	-
`floodOpacity?`	`string \| number`	-
`focusable?`	`"auto" \| Booleanish`	-
`fontFamily?`	`string`	-
`fontSize?`	`string \| number`	-
`fontSizeAdjust?`	`string \| number`	-
`fontStretch?`	`string \| number`	-
`fontStyle?`	`string \| number`	-
`fontVariant?`	`string \| number`	-
`fontWeight?`	`string \| number`	-
`format?`	`string \| number`	-
`fr?`	`string \| number`	-
`from?`	`string \| number`	-
`fx?`	`string \| number`	-
`fy?`	`string \| number`	-
`g1?`	`string \| number`	-
`g2?`	`string \| number`	-
`glyphName?`	`string \| number`	-
`glyphOrientationHorizontal?`	`string \| number`	-
`glyphOrientationVertical?`	`string \| number`	-
`glyphRef?`	`string \| number`	-
`gradientTransform?`	`string`	-
`gradientUnits?`	`string`	-
`hanging?`	`string \| number`	-
`horizAdvX?`	`string \| number`	-
`horizOriginX?`	`string \| number`	-
`href?`	`string`	-
`ideographic?`	`string \| number`	-
`imageRendering?`	`string \| number`	-
`in2?`	`string \| number`	-
`in?`	`string`	-
`intercept?`	`string \| number`	-
`k1?`	`string \| number`	-
`k2?`	`string \| number`	-
`k3?`	`string \| number`	-
`k4?`	`string \| number`	-
`k?`	`string \| number`	-
`kernelMatrix?`	`string \| number`	-
`kernelUnitLength?`	`string \| number`	-
`kerning?`	`string \| number`	-
`keyPoints?`	`string \| number`	-
`keySplines?`	`string \| number`	-
`keyTimes?`	`string \| number`	-
`lengthAdjust?`	`string \| number`	-
`letterSpacing?`	`string \| number`	-
`lightingColor?`	`string \| number`	-
`limitingConeAngle?`	`string \| number`	-
`local?`	`string \| number`	-
`markerEnd?`	`string`	-
`markerHeight?`	`string \| number`	-
`markerMid?`	`string`	-
`markerStart?`	`string`	-
`markerUnits?`	`string \| number`	-
`markerWidth?`	`string \| number`	-
`mask?`	`string`	-
`maskContentUnits?`	`string \| number`	-
`maskUnits?`	`string \| number`	-
`mathematical?`	`string \| number`	-
`mode?`	`string \| number`	-
`numOctaves?`	`string \| number`	-
`offset?`	`string \| number`	-
`opacity?`	`string \| number`	-
`operator?`	`string \| number`	-
`order?`	`string \| number`	-
`orient?`	`string \| number`	-
`orientation?`	`string \| number`	-
`origin?`	`string \| number`	-
`overflow?`	`string \| number`	-
`overlinePosition?`	`string \| number`	-
`overlineThickness?`	`string \| number`	-
`paintOrder?`	`string \| number`	-
`panose1?`	`string \| number`	-
`path?`	`string`	-
`pathLength?`	`string \| number`	-
`patternContentUnits?`	`string`	-
`patternTransform?`	`string \| number`	-
`patternUnits?`	`string`	-
`pointerEvents?`	`string \| number`	-
`points?`	`string`	-
`pointsAtX?`	`string \| number`	-
`pointsAtY?`	`string \| number`	-
`pointsAtZ?`	`string \| number`	-
`preserveAlpha?`	`Booleanish`	-
`preserveAspectRatio?`	`string`	-
`primitiveUnits?`	`string \| number`	-
`r?`	`string \| number`	-
`radius?`	`string \| number`	-
`refX?`	`string \| number`	-
`refY?`	`string \| number`	-
`renderingIntent?`	`string \| number`	-
`repeatCount?`	`string \| number`	-
`repeatDur?`	`string \| number`	-
`requiredExtensions?`	`string \| number`	-
`requiredFeatures?`	`string \| number`	-
`restart?`	`string \| number`	-
`result?`	`string`	-
`rotate?`	`string \| number`	-
`rx?`	`string \| number`	-
`ry?`	`string \| number`	-
`scale?`	`string \| number`	-
`seed?`	`string \| number`	-
`shapeRendering?`	`string \| number`	-
`slope?`	`string \| number`	-
`spacing?`	`string \| number`	-
`specularConstant?`	`string \| number`	-
`specularExponent?`	`string \| number`	-
`speed?`	`string \| number`	-
`spreadMethod?`	`string`	-
`startOffset?`	`string \| number`	-
`stdDeviation?`	`string \| number`	-
`stemh?`	`string \| number`	-
`stemv?`	`string \| number`	-
`stitchTiles?`	`string \| number`	-
`stopColor?`	`string`	-
`stopOpacity?`	`string \| number`	-
`strikethroughPosition?`	`string \| number`	-
`strikethroughThickness?`	`string \| number`	-
`string?`	`string \| number`	-
`stroke?`	`string`	-
`strokeDasharray?`	`string \| number`	-
`strokeDashoffset?`	`string \| number`	-
`strokeLinecap?`	`"inherit" \| "butt" \| "round" \| "square"`	-
`strokeLinejoin?`	`"inherit" \| "round" \| "miter" \| "bevel"`	-
`strokeMiterlimit?`	`string \| number`	-
`strokeOpacity?`	`string \| number`	-
`strokeWidth?`	`string \| number`	-
`surfaceScale?`	`string \| number`	-
`systemLanguage?`	`string \| number`	-
`tableValues?`	`string \| number`	-
`targetX?`	`string \| number`	-
`targetY?`	`string \| number`	-
`textAnchor?`	`string`	-
`textDecoration?`	`string \| number`	-
`textLength?`	`string \| number`	-
`textRendering?`	`string \| number`	-
`to?`	`string \| number`	-
`transform?`	`string`	-
`u1?`	`string \| number`	-
`u2?`	`string \| number`	-
`underlinePosition?`	`string \| number`	-
`underlineThickness?`	`string \| number`	-
`unicode?`	`string \| number`	-
`unicodeBidi?`	`string \| number`	-
`unicodeRange?`	`string \| number`	-
`unitsPerEm?`	`string \| number`	-
`vAlphabetic?`	`string \| number`	-
`values?`	`string`	-
`vectorEffect?`	`string \| number`	-
`version?`	`string`	-
`vertAdvY?`	`string \| number`	-
`vertOriginX?`	`string \| number`	-
`vertOriginY?`	`string \| number`	-
`vHanging?`	`string \| number`	-
`vIdeographic?`	`string \| number`	-
`viewBox?`	`string`	-
`viewTarget?`	`string \| number`	-
`visibility?`	`string \| number`	-
`vMathematical?`	`string \| number`	-
`widths?`	`string \| number`	-
`wordSpacing?`	`string \| number`	-
`writingMode?`	`string \| number`	-
`x1?`	`string \| number`	-
`x2?`	`string \| number`	-
`x?`	`string \| number`	-
`xChannelSelector?`	`string`	-
`xHeight?`	`string \| number`	-
`xlinkActuate?`	`string`	-
`xlinkArcrole?`	`string`	-
`xlinkHref?`	`string`	-
`xlinkRole?`	`string`	-
`xlinkShow?`	`string`	-
`xlinkTitle?`	`string`	-
`xlinkType?`	`string`	-
`xmlBase?`	`string`	-
`xmlLang?`	`string`	-
`xmlns?`	`string`	-
`xmlnsXlink?`	`string`	-
`xmlSpace?`	`string`	-
`y1?`	`string \| number`	-
`y2?`	`string \| number`	-
`y?`	`string \| number`	-
`yChannelSelector?`	`string`	-
`z?`	`string \| number`	-
`zoomAndPan?`	`string`	-
`aria-activedescendant?`	`string`	-
`aria-atomic?`	`Booleanish`	-
`aria-autocomplete?`	`"list" \| "none" \| "inline" \| "both"`	-
`aria-braillelabel?`	`string`	-
`aria-brailleroledescription?`	`string`	-
`aria-busy?`	`Booleanish`	-
`aria-checked?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-colcount?`	`number`	-
`aria-colindex?`	`number`	-
`aria-colindextext?`	`string`	-
`aria-colspan?`	`number`	-
`aria-controls?`	`string`	-
`aria-current?`	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"`	-
`aria-describedby?`	`string`	-
`aria-description?`	`string`	-
`aria-details?`	`string`	-
`aria-disabled?`	`Booleanish`	-
`aria-dropeffect?`	`"link" \| "none" \| "copy" \| "execute" \| "move" \| "popup"`	-
`aria-errormessage?`	`string`	-
`aria-expanded?`	`Booleanish`	-
`aria-flowto?`	`string`	-
`aria-grabbed?`	`Booleanish`	-
`aria-haspopup?`	`boolean \| "dialog" \| "grid" \| "listbox" \| "menu" \| "tree" \| "true" \| "false"`	-
`aria-hidden?`	`Booleanish`	-
`aria-invalid?`	`boolean \| "true" \| "false" \| "grammar" \| "spelling"`	-
`aria-keyshortcuts?`	`string`	-
`aria-label?`	`string`	-
`aria-labelledby?`	`string`	-
`aria-level?`	`number`	-
`aria-live?`	`"off" \| "assertive" \| "polite"`	-
`aria-modal?`	`Booleanish`	-
`aria-multiline?`	`Booleanish`	-
`aria-multiselectable?`	`Booleanish`	-
`aria-orientation?`	`"horizontal" \| "vertical"`	-
`aria-owns?`	`string`	-
`aria-placeholder?`	`string`	-
`aria-posinset?`	`number`	-
`aria-pressed?`	`boolean \| "true" \| "false" \| "mixed"`	-
`aria-readonly?`	`Booleanish`	-
`aria-relevant?`	`"additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text" \| "text additions" \| "text removals"`	-
`aria-required?`	`Booleanish`	-
`aria-roledescription?`	`string`	-
`aria-rowcount?`	`number`	-
`aria-rowindex?`	`number`	-
`aria-rowindextext?`	`string`	-
`aria-rowspan?`	`number`	-
`aria-selected?`	`Booleanish`	-
`aria-setsize?`	`number`	-
`aria-sort?`	`"none" \| "ascending" \| "descending" \| "other"`	-
`aria-valuemax?`	`number`	-
`aria-valuemin?`	`number`	-
`aria-valuenow?`	`number`	-
`aria-valuetext?`	`string`	-
`children?`	`ReactNode`	-
`dangerouslySetInnerHTML?`	`{ __html: string \| TrustedHTML; }`	-
`onCopy?`	`ClipboardEventHandler<SVGSVGElement>`	-
`onCopyCapture?`	`ClipboardEventHandler<SVGSVGElement>`	-
`onCut?`	`ClipboardEventHandler<SVGSVGElement>`	-
`onCutCapture?`	`ClipboardEventHandler<SVGSVGElement>`	-
`onPaste?`	`ClipboardEventHandler<SVGSVGElement>`	-
`onPasteCapture?`	`ClipboardEventHandler<SVGSVGElement>`	-
`onCompositionEnd?`	`CompositionEventHandler<SVGSVGElement>`	-
`onCompositionEndCapture?`	`CompositionEventHandler<SVGSVGElement>`	-
`onCompositionStart?`	`CompositionEventHandler<SVGSVGElement>`	-
`onCompositionStartCapture?`	`CompositionEventHandler<SVGSVGElement>`	-
`onCompositionUpdate?`	`CompositionEventHandler<SVGSVGElement>`	-
`onCompositionUpdateCapture?`	`CompositionEventHandler<SVGSVGElement>`	-
`onFocus?`	`FocusEventHandler<SVGSVGElement>`	-
`onFocusCapture?`	`FocusEventHandler<SVGSVGElement>`	-
`onBlur?`	`FocusEventHandler<SVGSVGElement>`	-
`onBlurCapture?`	`FocusEventHandler<SVGSVGElement>`	-
`onChange?`	`FormEventHandler<SVGSVGElement>`	-
`onChangeCapture?`	`FormEventHandler<SVGSVGElement>`	-
`onBeforeInput?`	`FormEventHandler<SVGSVGElement>`	-
`onBeforeInputCapture?`	`FormEventHandler<SVGSVGElement>`	-
`onInput?`	`FormEventHandler<SVGSVGElement>`	-
`onInputCapture?`	`FormEventHandler<SVGSVGElement>`	-
`onReset?`	`FormEventHandler<SVGSVGElement>`	-
`onResetCapture?`	`FormEventHandler<SVGSVGElement>`	-
`onSubmit?`	`FormEventHandler<SVGSVGElement>`	-
`onSubmitCapture?`	`FormEventHandler<SVGSVGElement>`	-
`onInvalid?`	`FormEventHandler<SVGSVGElement>`	-
`onInvalidCapture?`	`FormEventHandler<SVGSVGElement>`	-
`onLoad?`	`ReactEventHandler<SVGSVGElement>`	-
`onLoadCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onError?`	`ReactEventHandler<SVGSVGElement>`	-
`onErrorCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onKeyDown?`	`KeyboardEventHandler<SVGSVGElement>`	-
`onKeyDownCapture?`	`KeyboardEventHandler<SVGSVGElement>`	-
`onKeyPress?`	`KeyboardEventHandler<SVGSVGElement>`	-
`onKeyPressCapture?`	`KeyboardEventHandler<SVGSVGElement>`	-
`onKeyUp?`	`KeyboardEventHandler<SVGSVGElement>`	-
`onKeyUpCapture?`	`KeyboardEventHandler<SVGSVGElement>`	-
`onAbort?`	`ReactEventHandler<SVGSVGElement>`	-
`onAbortCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onCanPlay?`	`ReactEventHandler<SVGSVGElement>`	-
`onCanPlayCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onCanPlayThrough?`	`ReactEventHandler<SVGSVGElement>`	-
`onCanPlayThroughCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onDurationChange?`	`ReactEventHandler<SVGSVGElement>`	-
`onDurationChangeCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onEmptied?`	`ReactEventHandler<SVGSVGElement>`	-
`onEmptiedCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onEncrypted?`	`ReactEventHandler<SVGSVGElement>`	-
`onEncryptedCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onEnded?`	`ReactEventHandler<SVGSVGElement>`	-
`onEndedCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onLoadedData?`	`ReactEventHandler<SVGSVGElement>`	-
`onLoadedDataCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onLoadedMetadata?`	`ReactEventHandler<SVGSVGElement>`	-
`onLoadedMetadataCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onLoadStart?`	`ReactEventHandler<SVGSVGElement>`	-
`onLoadStartCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onPause?`	`ReactEventHandler<SVGSVGElement>`	-
`onPauseCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onPlay?`	`ReactEventHandler<SVGSVGElement>`	-
`onPlayCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onPlaying?`	`ReactEventHandler<SVGSVGElement>`	-
`onPlayingCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onProgress?`	`ReactEventHandler<SVGSVGElement>`	-
`onProgressCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onRateChange?`	`ReactEventHandler<SVGSVGElement>`	-
`onRateChangeCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onResize?`	`ReactEventHandler<SVGSVGElement>`	-
`onResizeCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onSeeked?`	`ReactEventHandler<SVGSVGElement>`	-
`onSeekedCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onSeeking?`	`ReactEventHandler<SVGSVGElement>`	-
`onSeekingCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onStalled?`	`ReactEventHandler<SVGSVGElement>`	-
`onStalledCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onSuspend?`	`ReactEventHandler<SVGSVGElement>`	-
`onSuspendCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onTimeUpdate?`	`ReactEventHandler<SVGSVGElement>`	-
`onTimeUpdateCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onVolumeChange?`	`ReactEventHandler<SVGSVGElement>`	-
`onVolumeChangeCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onWaiting?`	`ReactEventHandler<SVGSVGElement>`	-
`onWaitingCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onAuxClick?`	`MouseEventHandler<SVGSVGElement>`	-
`onAuxClickCapture?`	`MouseEventHandler<SVGSVGElement>`	-
`onClick?`	`MouseEventHandler<SVGSVGElement>`	-
`onClickCapture?`	`MouseEventHandler<SVGSVGElement>`	-
`onContextMenu?`	`MouseEventHandler<SVGSVGElement>`	-
`onContextMenuCapture?`	`MouseEventHandler<SVGSVGElement>`	-
`onDoubleClick?`	`MouseEventHandler<SVGSVGElement>`	-
`onDoubleClickCapture?`	`MouseEventHandler<SVGSVGElement>`	-
`onDrag?`	`DragEventHandler<SVGSVGElement>`	-
`onDragCapture?`	`DragEventHandler<SVGSVGElement>`	-
`onDragEnd?`	`DragEventHandler<SVGSVGElement>`	-
`onDragEndCapture?`	`DragEventHandler<SVGSVGElement>`	-
`onDragEnter?`	`DragEventHandler<SVGSVGElement>`	-
`onDragEnterCapture?`	`DragEventHandler<SVGSVGElement>`	-
`onDragExit?`	`DragEventHandler<SVGSVGElement>`	-
`onDragExitCapture?`	`DragEventHandler<SVGSVGElement>`	-
`onDragLeave?`	`DragEventHandler<SVGSVGElement>`	-
`onDragLeaveCapture?`	`DragEventHandler<SVGSVGElement>`	-
`onDragOver?`	`DragEventHandler<SVGSVGElement>`	-
`onDragOverCapture?`	`DragEventHandler<SVGSVGElement>`	-
`onDragStart?`	`DragEventHandler<SVGSVGElement>`	-
`onDragStartCapture?`	`DragEventHandler<SVGSVGElement>`	-
`onDrop?`	`DragEventHandler<SVGSVGElement>`	-
`onDropCapture?`	`DragEventHandler<SVGSVGElement>`	-
`onMouseDown?`	`MouseEventHandler<SVGSVGElement>`	-
`onMouseDownCapture?`	`MouseEventHandler<SVGSVGElement>`	-
`onMouseEnter?`	`MouseEventHandler<SVGSVGElement>`	-
`onMouseLeave?`	`MouseEventHandler<SVGSVGElement>`	-
`onMouseMove?`	`MouseEventHandler<SVGSVGElement>`	-
`onMouseMoveCapture?`	`MouseEventHandler<SVGSVGElement>`	-
`onMouseOut?`	`MouseEventHandler<SVGSVGElement>`	-
`onMouseOutCapture?`	`MouseEventHandler<SVGSVGElement>`	-
`onMouseOver?`	`MouseEventHandler<SVGSVGElement>`	-
`onMouseOverCapture?`	`MouseEventHandler<SVGSVGElement>`	-
`onMouseUp?`	`MouseEventHandler<SVGSVGElement>`	-
`onMouseUpCapture?`	`MouseEventHandler<SVGSVGElement>`	-
`onSelect?`	`ReactEventHandler<SVGSVGElement>`	-
`onSelectCapture?`	`ReactEventHandler<SVGSVGElement>`	-
`onTouchCancel?`	`TouchEventHandler<SVGSVGElement>`	-
`onTouchCancelCapture?`	`TouchEventHandler<SVGSVGElement>`	-
`onTouchEnd?`	`TouchEventHandler<SVGSVGElement>`	-
`onTouchEndCapture?`	`TouchEventHandler<SVGSVGElement>`	-
`onTouchMove?`	`TouchEventHandler<SVGSVGElement>`	-
`onTouchMoveCapture?`	`TouchEventHandler<SVGSVGElement>`	-
`onTouchStart?`	`TouchEventHandler<SVGSVGElement>`	-
`onTouchStartCapture?`	`TouchEventHandler<SVGSVGElement>`	-
`onPointerDown?`	`PointerEventHandler<SVGSVGElement>`	-
`onPointerDownCapture?`	`PointerEventHandler<SVGSVGElement>`	-
`onPointerMove?`	`PointerEventHandler<SVGSVGElement>`	-
`onPointerMoveCapture?`	`PointerEventHandler<SVGSVGElement>`	-
`onPointerUp?`	`PointerEventHandler<SVGSVGElement>`	-
`onPointerUpCapture?`	`PointerEventHandler<SVGSVGElement>`	-
`onPointerCancel?`	`PointerEventHandler<SVGSVGElement>`	-
`onPointerCancelCapture?`	`PointerEventHandler<SVGSVGElement>`	-
`onPointerEnter?`	`PointerEventHandler<SVGSVGElement>`	-
`onPointerLeave?`	`PointerEventHandler<SVGSVGElement>`	-
`onPointerOver?`	`PointerEventHandler<SVGSVGElement>`	-
`onPointerOverCapture?`	`PointerEventHandler<SVGSVGElement>`	-
`onPointerOut?`	`PointerEventHandler<SVGSVGElement>`	-
`onPointerOutCapture?`	`PointerEventHandler<SVGSVGElement>`	-
`onGotPointerCapture?`	`PointerEventHandler<SVGSVGElement>`	-
`onGotPointerCaptureCapture?`	`PointerEventHandler<SVGSVGElement>`	-
`onLostPointerCapture?`	`PointerEventHandler<SVGSVGElement>`	-
`onLostPointerCaptureCapture?`	`PointerEventHandler<SVGSVGElement>`	-
`onScroll?`	`UIEventHandler<SVGSVGElement>`	-
`onScrollCapture?`	`UIEventHandler<SVGSVGElement>`	-
`onWheel?`	`WheelEventHandler<SVGSVGElement>`	-
`onWheelCapture?`	`WheelEventHandler<SVGSVGElement>`	-
`onAnimationStart?`	`AnimationEventHandler<SVGSVGElement>`	-
`onAnimationStartCapture?`	`AnimationEventHandler<SVGSVGElement>`	-
`onAnimationEnd?`	`AnimationEventHandler<SVGSVGElement>`	-
`onAnimationEndCapture?`	`AnimationEventHandler<SVGSVGElement>`	-
`onAnimationIteration?`	`AnimationEventHandler<SVGSVGElement>`	-
`onAnimationIterationCapture?`	`AnimationEventHandler<SVGSVGElement>`	-
`onToggle?`	`ToggleEventHandler<SVGSVGElement>`	-
`onBeforeToggle?`	`ToggleEventHandler<SVGSVGElement>`	-
`onTransitionCancel?`	`TransitionEventHandler<SVGSVGElement>`	-
`onTransitionCancelCapture?`	`TransitionEventHandler<SVGSVGElement>`	-
`onTransitionEnd?`	`TransitionEventHandler<SVGSVGElement>`	-
`onTransitionEndCapture?`	`TransitionEventHandler<SVGSVGElement>`	-
`onTransitionRun?`	`TransitionEventHandler<SVGSVGElement>`	-
`onTransitionRunCapture?`	`TransitionEventHandler<SVGSVGElement>`	-
`onTransitionStart?`	`TransitionEventHandler<SVGSVGElement>`	-
`onTransitionStartCapture?`	`TransitionEventHandler<SVGSVGElement>`	-
`variant?`	`"default" \| "circle" \| "pinwheel" \| "circle-filled" \| "ellipsis" \| "ring" \| "bars" \| "infinite"`	-

Spinner

Installation

Features

Examples

Variants

Customization

Props

Spinner

On this page