Spinner ​

Communicates an ongoing, indeterminate loading state.

Sizes ​

vue
<script setup lang="ts">
import { Spinner } from 'frappe-ui'
</script>

<template>
  <div class="flex items-center gap-6">
    <Spinner size="xs" />
    <Spinner size="sm" />
    <Spinner size="md" />
    <Spinner size="lg" />
  </div>
</template>

Themes ​

vue
<script setup lang="ts">
import { Spinner } from 'frappe-ui'
</script>

<template>
  <div class="flex items-center gap-6">
    <Spinner theme="gray" size="lg" />
    <Spinner theme="red" size="lg" />
  </div>
</template>

Track ​

vue
<script setup lang="ts">
import { Spinner } from 'frappe-ui'
</script>

<template>
  <div class="flex items-center gap-6">
    <Spinner size="lg" />
    <Spinner size="lg" track />
    <Spinner size="lg" theme="red" />
    <Spinner size="lg" theme="red" track />
  </div>
</template>

In context ​

vue
<script setup lang="ts">
import { Button } from 'frappe-ui'
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <Button
      theme="gray"
      variant="solid"
      icon="lucide-save"
      :loading="true"
      size="xs"
    />
    <Button
      theme="gray"
      variant="solid"
      :loading="true"
      loading-text="Discover"
      size="xs"
    />
    <Button
      theme="gray"
      variant="solid"
      :loading="true"
      loading-text="Discover"
    />
    <Button
      theme="red"
      variant="subtle"
      :loading="true"
      loading-text="Deleting"
      size="md"
    />
    <Button
      theme="gray"
      variant="ghost"
      :loading="true"
      loading-text="Loading"
      size="md"
    />
    <Button
      theme="gray"
      variant="subtle"
      :loading="true"
      loading-text="Get app"
      size="lg"
    />
  </div>
</template>

API Reference ​

Show types
typescript
export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg'

export type SpinnerTheme = 'gray' | 'red'

export interface SpinnerProps {
  /** Diameter — xs=12px, sm=14px, md=16px, lg=20px. Omit to size with classes (default 16px). */
  size?: SpinnerSize

  /** Spinner color. Omit to inherit the text color. */
  theme?: SpinnerTheme

  /** Show a faint track behind the arc */
  track?: boolean
}
size
SpinnerSize

Diameter — xs=12px, sm=14px, md=16px, lg=20px. Omit to size with classes (default 16px).

theme
SpinnerTheme

Spinner color. Omit to inherit the text color.

track
= false
boolean

Show a faint track behind the arc

SliderSwitch