RTL Support: Full

Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Try in Cursor

Spin

The Spin component is used to indicate a loading state in your application.

Basic Usage

Renders a spinner using the default size.

Vue

<template>
  <HLSpin id="spinner-example-default" />
</template>

<script setup lang="ts">
import { HLSpin } from '@platform-ui/highrise'
</script>

With Custom Content

Wraps content in the default slot so the spinner overlays it while loading.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Vue

<template>
  <HLSpin id="spinner-example-custom"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,
    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centuries, but also the leap into electronic typesetting,
    remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</HLSpin>
</template>

<script setup lang="ts">
import { HLSpin } from '@platform-ui/highrise'
</script>

With Description

Uses the description slot to show text alongside the spinner.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

please wait...

Vue

<template>
  <HLSpin id="spinner-example-description">
    <template #description> please wait... </template>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,
    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centuries, but also the leap into electronic typesetting,
    remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </HLSpin>
</template>

<script setup lang="ts">
import { HLSpin } from '@platform-ui/highrise'
</script>

With Custom Icon

Replaces the default spinner graphic via the icon slot.

Vue

<template>
  <HLSpin id="spinner-example-icon">
    <template #icon>
      <HLIcon size="34px"><Loading01Icon /></HLIcon>
    </template>
  </HLSpin>
</template>

<script setup lang="ts">
import { HLSpin, HLIcon } from '@platform-ui/highrise'
import { Loading01Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Different Sizes

The Spin component supports three predefined sizes: sm, md, and lg.

sm

<template>
  <HLSpin size="sm" id="spinner-example-sm" />
</template>

<script setup lang="ts">
import { HLSpin } from '@platform-ui/highrise'
</script>

md

<template>
  <HLSpin size="md" id="spinner-example-md" />
</template>

<script setup lang="ts">
import { HLSpin } from '@platform-ui/highrise'
</script>

lg

<template>
  <HLSpin size="lg" id="spinner-example-lg" />
</template>

<script setup lang="ts">
import { HLSpin } from '@platform-ui/highrise'
</script>

Accessibility

• Pair the spinner with role="status" / aria-live="polite" and add aria-label copy such as Loading contacts so users know what is happening.
• When a separate text label already exists, hide the spinner visuals with aria-hidden="true".

Imports

import { HLSpin } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id *	string	undefined	The id of the spinner.
size	'sm' | 'md' | 'lg' | number	'md'	Size of the spinner. Use predefined sizes or a custom number value.
show	boolean	true	Whether to show the spinner.

Slots

Name	Parameters	Description
default	()	Content to be displayed with the spinner overlay when loading.
description	()	Description to be displayed with the spinner.
icon	()	Icon to be displayed with the spinner.