LoaderCircular

SfLoaderCircular is animated loading spinner that can be used to show that some content is loading.

Examples

Sizes

SfLoaderCircular supports various sizes that can be set with the size prop: 'xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl'.

<template>
  <div class="flex flex-col gap-4 flex-wrap sm:flex-row mr-6 mb-6">
    <SfLoaderCircular size="xs" />
    <SfLoaderCircular size="sm" />
    <SfLoaderCircular size="base" />
    <SfLoaderCircular />
    <SfLoaderCircular size="lg" />
    <SfLoaderCircular size="xl" />
    <SfLoaderCircular size="2xl" />
    <SfLoaderCircular size="3xl" />
    <SfLoaderCircular size="4xl" />
  </div>
</template>

<script lang="ts" setup>
import { SfLoaderCircular } from '@storefront-ui/vue';
</script>

Customizing colors

By default, SfLoaderCircular uses primary-700 as the animated shape color (customizable by setting text color) and neutral-300 for the background ring. You can change these values in your Tailwind configuration or override them for a single element using the important modifier.

<template>
  <div class="flex gap-4 flex-wrap">
    <SfLoaderCircular class="!text-cyan-700" size="2xl" />
    <SfLoaderCircular size="2xl" />
    <SfLoaderCircular class="!ring-yellow-200" size="2xl" />
  </div>
</template>

<script lang="ts" setup>
import { SfLoaderCircular } from '@storefront-ui/vue';
</script>

Accessibility notes

SfLoaderCircular uses aria-live="polite" to allow screen readers to read the loading status. This can be overriden by passing your own aria-live value to the component.

It's important to properly set aria-label for screen readers to read proper information while target component is loading. Default value is set to loading.

Playground