AbpSpinner

AbpSpinner shows an ongoing operation with a screen-reader label. It does not block input or own a request.

Show only while working

<template>
  <div class="d-flex gap-3 align-items-center" :aria-busy="loading">
    <AbpButton variant="secondary" @click="loading = !loading">Toggle loading</AbpButton>
    <AbpSpinner v-if="loading" size="sm" label="Loading books" />
    <span>{{ loading ? 'Loading…' : 'Ready' }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { AbpButton, AbpSpinner } from '@lsw-abpvue/theme-shared';
const loading = ref(true);
</script>

Put the spinner near the affected content, bind the content's aria-busy and give the spinner a specific label. Avoid an unlabeled icon that only communicates motion visually.

Buttons and page loading

Use AbpButton's loading prop for a save button; adding a separate spinner inside that button is usually unnecessary. For initial data loading, show a spinner and retain a distinct empty/error state. Hide it in finally or derive its visibility from the request status.

size changes the visual size. It does not add a full-screen mask, focus trap or reduced-motion setting. Disable affected commands separately when an operation cannot be repeated. See request lifecycle.

Props, events and slots

Source

Types come from the public contract and defaults from the current implementation. A dash means no explicit default; optional boolean props are normally false when omitted.

Props

Name	Type	Required	Default
size	AbpSize | undefined	No	'md'
label	string | undefined	No	—
overlay	boolean | undefined	No	—

Events

No component-specific events are declared.

Slots

No named slots.