AisSpinner

AisSpinner provides an animated icon that indicates the application is in a busy state. The spinner is centered horizontally in its container. Developers with more specific needs may use AisIcon's busy icon to build their own spinner. See also AisProgress.

Example

By default AisSpinner provides a page-sized spinner, but it also exposes props to customize the spinner's look and feel. Developers are expected to use standard Tailwind classes to customize the component.

Loading data

Size

text-7xltext-5xltext-3xl

Color

text-ui-gray-900text-ui-goldtext-success

Opacity

opacity-60opacity-30opacity-100

<template>
  <div class="grid gap-8 mt-4">
    <AisSpinner
        :size="size"
        :color="color"
        :opacity="opacity"
    />

    <div class="grid gap-2 md:grid-cols-3 p-4 border rounded bg-ui-gray-50">
      <AisField label="Size">
        <AisSelect v-model="size" :options="sizes" size="sm"  />
      </AisField>

      <AisField label="Color">
        <AisSelect v-model="color" :options="colors" size="sm" />
      </AisField>

      <AisField label="Opacity">
        <AisSelect v-model="opacity" :options="opacities" size="sm" />
      </AisField>
    </div>
  </div>
</template>

<script setup>
  import {ref} from "vue";
  import { AisSpinner } from '@ais-public/ais-components';
  import { AisField } from '@ais-public/ais-components';
  import { AisSelect } from '@ais-public/ais-components';

  const sizes = ["text-7xl", "text-5xl", "text-3xl"]
  const colors = ["text-ui-gray-900", "text-ui-gold", "text-success"]
  const opacities = ["opacity-60", "opacity-30", "opacity-100"]

  const size = ref(sizes[0])
  const color = ref(colors[0])
  const opacity = ref(opacities[0])
</script>

Props

Description

description accepts a string that will be accessible to screen readers. The default message is "Loading data".

Size

size accepts a Tailwind text size class. The default value is text-7xl.

Color

color accepts a Tailwind text color class. The default value is text-ui-gray-900. See the ais-components colors for details. (Link to our color page)

Opacity

opacity accepts a Tailwind opacity class. The default value is opacity-60.