Accessibility: Work in progress

Translations: Not Needed

Migration Guide: Full

Spin

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

Basic Usage

Vue

<template>
  <HLSpin id="spinner-example-default" />
</template>
<script setup>
  import { HLSpin } from '@platform-ui/highrise'
</script>

With Custom Content

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. </HLSpin>
</template>
<script setup>
  import { HLSpin } from '@platform-ui/highrise'
</script>

With Description

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.
  </HLSpin>
</template>
<script setup>
  import { HLSpin } from '@platform-ui/highrise'
</script>

With Custom Icon

Vue

<template>
  <HLSpin id="spinner-example-icon">
    <template #icon>
      <HLIcon size="34px"><Loading01Icon /></HLIcon>
    </template>
  </HLSpin>
</template>
<script setup>
  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>
  import { HLSpin } from '@platform-ui/highrise'
</script>

md

<template>
  <HLSpin size="md" id="spinner-example-md" />
</template>
<script setup>
  import { HLSpin } from '@platform-ui/highrise'
</script>

lg

<template>
  <HLSpin size="lg" id="spinner-example-lg" />
</template>
<script setup>
  import { HLSpin } from '@platform-ui/highrise'
</script>

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.