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