ACV Spinner

Spinner is a loading indicator that can be used to show the user that the application is loading.

Figma component anatomy

https://www.figma.com/design/6nFlVmwDwvGloglQHxyElh/Syntax-UI-3.0?node-id=411-17998

Spinner can be used in several ways:

• Global: When the application is loading, the spinner is shown on top of the application.
• Local: When a specific component is loading, the spinner is shown inside that component.
• Button: When a button is clicked, the spinner is shown inside the button.
• Overlay: When a specific component is loading, the spinner is shown on top of the component.
• Inline: When a specific component is loading, the spinner is shown inside the component.
• Loading Component: It can be used as a loading component.

Basic usage

Source code

<script setup>
  import Spinner from '@/components/spinner/spinner.vue';
</script>

<template>
  <Spinner size="large" />
</template>

Spinner sizes

The spinner can be displayed in different sizes.

Source code

<script setup>
  import Spinner from '@/components/spinner/spinner.vue';
</script>

<template>
  <div class="acv-grid-row acv-grid--cols-4">
    <div class="acv-grid-col">
      <Spinner size="small" />
    </div>
    <div class="acv-grid-col">
      <Spinner size="medium" />
    </div>
    <div class="acv-grid-col">
      <Spinner size="large" />
    </div>
    <div class="acv-grid-col">
      <Spinner size="x-large" />
    </div>
  </div>
</template>

Spinner colors

The spinner can be displayed in different colors.

Source code

<script setup>
  import Spinner from '@/components/spinner/spinner.vue';
  import { BRAND_COLORS, STATUS_COLORS } from '@/utils/color.ts';
</script>

<template>
  <div class="acv-grid-row acv-grid--cols-4">
    <div
      v-for="color in { ...BRAND_COLORS,
                        ...STATUS_COLORS }"
      :key="color"
      class="acv-grid-col"
      :class="{
        'acv-bg-surface-fixed-primary pa-8': color === BRAND_COLORS.inverted,
      }"
    >
      <Spinner
        size="large"
        :color="color"
      />
    </div>
  </div>
</template>

Usage in a widget

Data is loading

Wait until it is completed

Data is loading...

No data found

Source code

<script setup>
  import AcvSpinner from '@/components/spinner/spinner.vue';
  import AcvButton from '@/components/button/button.vue';
</script>

<template>
  <div class="acv-grid-row acv-grid--cols-3">
    <div class="data-loading">
      <AcvSpinner
        class="icon"
        size="large"
      />
      <div class="title">
        Data is loading
      </div>
      <div class="text">
        Wait until it is completed
      </div>
      <div>
        <AcvButton type="ghost">
          Button
        </AcvButton>
      </div>
    </div>
    <div class="data-is-loading">
      <AcvSpinner size="small" />
      Data is loading...
    </div>
    <div class="no-data-found">
      No data found
    </div>
  </div>
</template>

<style scoped>
.data-loading {
  display: grid;
  justify-content: center;
  place-items: center;
  padding: 16px;
  border: 1px solid hsl(0deg 0% 88%);
  border-radius: 4px;
  gap: 8px;
  font-size: var(--acv-font-size-body);
  line-height: var(--acv-font-line-height-regular);

  .title {
    font-weight: var(--acv-font-weight-strong);
  }
}

.data-is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--acv-font-size-body);
  line-height: var(--acv-font-line-height-regular);
}

.no-data-found {
  font-size: var(--acv-font-size-body);
  line-height: var(--acv-font-line-height-regular);
}
</style>

Related components

• Loading

Props

Prop name	Description	Type	Values	Default
color	Color of the Spinner	string	-	'primary'
size	Size of the Spinner	ComponentSize | "x-large"	-	'small'