Loading 加载

在异步数据尚未就绪时覆盖目标区域并显示进度状态。

内置样式

通过 variant 选择环形 ring、三点 dots、律动条 bars 或轨道 orbit。默认 ring 保持原有紧凑尺寸；各样式共用主题主色，支持 small / default / large 与独立 Spinner 的 compact。

环形正在处理

三点正在处理

律动条正在处理

轨道正在处理

<script setup>
import { AuLoadingSpinner } from 'aurora-plus';
const variants = [
  { value: 'ring', label: '环形' },
  { value: 'dots', label: '三点' },
  { value: 'bars', label: '律动条' },
  { value: 'orbit', label: '轨道' },
];
</script>
<template>
  <div class="loading-variants-demo">
    <div v-for="variant in variants" :key="variant.value" class="loading-variants-demo__item">
      <AuLoadingSpinner :variant="variant.value" size="large" :text="variant.label" />
      <AuLoadingSpinner :variant="variant.value" compact size="small" text="正在处理" />
    </div>
  </div>
  <div v-loading="{ loading: true, variant: 'dots', text: '正在读取内容' }" class="loading-variants-demo__area"></div>
</template>
<style scoped>
.loading-variants-demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 20px; }
.loading-variants-demo__item { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.loading-variants-demo__area { position: relative; min-height: 100px; margin-top: 20px; }
</style>

组件、服务和指令使用同名属性，例如 v-loading="{ loading: true, variant: 'dots' }" 与 AuLoading.service({ variant: 'orbit' })。自定义 spinner 插槽、svg 或图标组件优先于内置样式。

区域加载

工作区索引已完成

远程分支同步中

扩展状态等待中

<template>
  <div class="loading-basic-demo">
    <div class="au-doc-row">
      <AuButton type="primary" @click="loading = !loading">
        {{ loading ? '结束加载' : '重新加载' }}
      </AuButton>
      <AuButton @click="custom = !custom">
        {{ custom ? '使用默认图标' : '使用自定义 SVG' }}
      </AuButton>
    </div>
    <section
      v-loading="loadingOptions"
      class="loading-basic-demo__region"
    >
      <div v-for="task in tasks" :key="task.name" class="loading-basic-demo__row">
        <span>{{ task.name }}</span>
        <span>{{ task.status }}</span>
      </div>
    </section>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue';
import { AuButton } from 'aurora-plus';
const loading = ref(true);
const custom = ref(false);
const customSvg = `
  <path d="M12 3a9 9 0 1 0 9 9" stroke-width="2.2" />
  <path d="M18.4 5.6 21 3v5h-5l2.4-2.4Z" fill="currentColor" stroke="none" />
`;
const loadingOptions = computed(() => ({
  loading: loading.value,
  text: custom.value ? '正在同步更改…' : '加载中…',
  svg: custom.value ? customSvg : '',
  svgViewBox: '0 0 24 24',
  delay: 120,
}));
const tasks = [
  { name: '工作区索引', status: '已完成' },
  { name: '远程分支', status: '同步中' },
  { name: '扩展状态', status: '等待中' },
];
</script>
<style scoped>
.loading-basic-demo {
  display: grid;
  gap: 14px;
}
.loading-basic-demo__region {
  min-height: 168px;
  border: 1px solid var(--au-color-border-subtle);
  border-radius: var(--au-radius-surface);
  overflow: hidden;
}
.loading-basic-demo__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--au-color-border-muted);
  color: var(--au-color-text-default);
}
.loading-basic-demo__row:last-child {
  border-bottom: 0;
}
</style>

v-loading.body 将区域加载层挂到 body；v-loading.fullscreen.lock 覆盖视口并锁定滚动。

Loading 服务

服务模式可覆盖一个 DOM 节点，也可以直接创建全屏加载层。

<template>
  <div class="loading-service-demo">
    <div class="au-doc-row">
      <AuButton @click="openRegionLoading">区域服务</AuButton>
      <AuButton type="primary" @click="openFullscreenLoading">全屏服务</AuButton>
      <AuButton @click="AuLoading.service.closeAll()">关闭全部</AuButton>
    </div>
    <section ref="regionRef" class="loading-service-demo__region">
      服务模式可覆盖一个 DOM 节点，也可以直接创建全屏加载层。
    </section>
  </div>
</template>
<script setup>
import { onBeforeUnmount, ref } from 'vue';
import { AuButton, AuLoading } from 'aurora-plus';
const regionRef = ref(null);
const timers = new Set();
const instances = new Set();
function scheduleClose(instance, duration) {
  instances.add(instance);
  const timer = globalThis.setTimeout(() => {
    timers.delete(timer);
    instance.close();
    instances.delete(instance);
  }, duration);
  timers.add(timer);
}
function openRegionLoading() {
  if (!regionRef.value) return;
  const instance = AuLoading.service({
    target: regionRef.value,
    fullscreen: false,
    text: '正在读取区域数据…',
    delay: 100,
  });
  scheduleClose(instance, 1600);
}
function openFullscreenLoading() {
  const instance = AuLoading.service({
    lock: true,
    text: '正在同步工作区…',
    background: 'color-mix(in srgb, var(--au-material-background) 82%, transparent)',
  });
  const textTimer = globalThis.setTimeout(() => {
    timers.delete(textTimer);
    instance.setText('即将完成…');
  }, 700);
  timers.add(textTimer);
  scheduleClose(instance, 1700);
}
onBeforeUnmount(() => {
  timers.forEach((timer) => globalThis.clearTimeout(timer));
  instances.forEach((instance) => instance.close());
  timers.clear();
  instances.clear();
});
</script>
<style scoped>
.loading-service-demo {
  display: grid;
  gap: 14px;
}
.loading-service-demo__region {
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--au-color-border-subtle);
  border-radius: var(--au-radius-surface);
  color: var(--au-color-text-default);
  line-height: 1.6;
}
</style>

import { AuLoading } from 'aurora-plus';

const loading = AuLoading.service({
  lock: true,
  text: '正在保存…',
  variant: 'orbit',
});

loading.setText('正在刷新列表…');
loading.close();

AuLoading 组件

示例应用刚刚更新

Design Tokens5 分钟前

Component Lab昨天

正在载入项目…

小型默认大型

<template>
  <div class="loading-component-demo">
    <div class="au-doc-row">
      <AuButton type="primary" @click="loading = !loading">
        {{ loading ? '隐藏容器加载层' : '显示容器加载层' }}
      </AuButton>
    </div>
    <AuLoading :loading="loading" text="正在载入项目…">
      <section class="loading-component-demo__content">
        <div v-for="project in projects" :key="project.name" class="loading-component-demo__row">
          <span>{{ project.name }}</span>
          <span>{{ project.updatedAt }}</span>
        </div>
      </section>
    </AuLoading>
    <div class="loading-component-demo__spinners">
      <AuLoadingSpinner size="small" text="小型" />
      <AuLoadingSpinner text="默认" />
      <AuLoadingSpinner size="large" text="大型" />
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { AuButton, AuLoading, AuLoadingSpinner } from 'aurora-plus';
const loading = ref(true);
const projects = [
  { name: '示例应用', updatedAt: '刚刚更新' },
  { name: 'Design Tokens', updatedAt: '5 分钟前' },
  { name: 'Component Lab', updatedAt: '昨天' },
];
</script>
<style scoped>
.loading-component-demo {
  display: grid;
  gap: 14px;
}
.loading-component-demo__content {
  min-height: 156px;
  border: 1px solid var(--au-color-border-subtle);
  border-radius: var(--au-radius-surface);
  overflow: hidden;
}
.loading-component-demo__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--au-color-border-muted);
  color: var(--au-color-text-default);
}
.loading-component-demo__row:last-child {
  border-bottom: 0;
}
.loading-component-demo__row span:last-child {
  color: var(--au-color-text-secondary);
  font-size: var(--au-font-size-small);
}
.loading-component-demo__spinners {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 12px 0;
}
</style>

组件内加载状态

正在保存选择

任务

负责人

同步设计资源

林晨

更新组件索引

周言

检查加载状态

陈夏

正在刷新表格

<template>
  <div class="loading-control-demo">
    <div class="loading-control-demo__row">
      <AuButton loading>提交中</AuButton>
      <AuButton type="primary" loading>保存中</AuButton>
      <AuButtonGroup variant="connected">
        <AuButtonGroupItem :icon="IconRefresh" loading>同步</AuButtonGroupItem>
        <AuButtonGroupItem :icon="IconSettings">设置</AuButtonGroupItem>
      </AuButtonGroup>
    </div>
    <div class="loading-control-demo__fields">
      <AuInput model-value="正在读取账户信息" loading />
      <AuCheckbox :model-value="true" loading>正在保存选择</AuCheckbox>
      <AuSwitch :model-value="true" loading active-text="正在应用设置" />
    </div>
    <AuVirtualTable
      :data="rows"
      :height="184"
      loading
      loading-text="正在刷新表格"
    >
      <AuTableColumn prop="name" label="任务" :flex-grow="1" :min-width="150" />
      <AuTableColumn prop="owner" label="负责人" :width="100" />
    </AuVirtualTable>
  </div>
</template>
<script setup>
import {
  AuButton,
  AuButtonGroup,
  AuButtonGroupItem,
  AuCheckbox,
  AuInput,
  AuSwitch,
  AuTableColumn,
  AuVirtualTable,
} from 'aurora-plus';
import { IconRefresh, IconSettings } from 'aurora-plus/icons';
const rows = [
  { id: 1, name: '同步设计资源', owner: '林晨' },
  { id: 2, name: '更新组件索引', owner: '周言' },
  { id: 3, name: '检查加载状态', owner: '陈夏' },
];
</script>
<style scoped>
.loading-control-demo,
.loading-control-demo__fields {
  display: grid;
  gap: 14px;
}
.loading-control-demo__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.loading-control-demo__fields {
  width: min(100%, 380px);
}
</style>

Options / Attributes

配置	说明	类型	默认值
loading	是否显示加载层；服务调用默认显示	boolean	false（组件）
target	服务需要覆盖的 DOM 节点或选择器	HTMLElement / string	document.body
body	将区域服务挂载到 body 并对齐目标	boolean	false
fullscreen	是否覆盖整个视口；服务未传 target 时默认为 true	boolean	false（组件）
lock	显示期间是否锁定页面滚动	boolean	false
text	加载文案；服务还接受 VNode / VNode[]	string / number / VNode / VNode[]	''
size	图标与文字尺寸，可选 small / default / large	string	default
variant	内置样式：ring / dots / bars / orbit	string	ring
spinner	自定义 Vue 图标组件；服务中的字符串值按 SVG 标记处理	Component / string	—
svg	自定义 SVG 内部标记	string	''
svgViewBox	自定义 SVG 的 viewBox	string	0 0 24 24
color	加载图标颜色	string	主题主色
background	加载层背景 CSS 值	string	区域为材质半透明表面，全屏为透明
customClass	加载层自定义类名	string / array / object	''
zIndex	加载层层级	number	1000
delay	延迟显示时间，单位 ms	number	0
beforeClose	服务关闭前调用；返回 false 可阻止关闭	() => boolean / void	—
closed	服务关闭过渡和 DOM 清理完成后调用	() => void	—

指令附加属性

属性	说明
au-loading-text	加载文案
au-loading-svg / au-loading-spinner	自定义 SVG 内部标记
au-loading-svg-view-box	SVG viewBox
au-loading-background	加载层背景
au-loading-custom-class	自定义类名
au-loading-color	加载图标颜色
au-loading-variant	内置样式：ring / dots / bars / orbit

SVG 字符串直接作为标记渲染，仅传入可信内容。

Service API

方法或属性	说明
AuLoading.service(options)	创建加载实例；无 target 时为全屏单例
AuLoading.service.closeAll()	请求关闭全部服务实例；关闭守卫仍会执行
instance.close()	请求关闭当前实例
instance.setText(text)	更新加载文案
instance.update(options)	更新文案、图标、颜色、背景、层级等视觉配置
instance.closed	实例是否已完成清理，只读

Component Slots / Events / Exposes

名称	说明
default	被加载层覆盖的内容
spinner	自定义加载图标，作用域参数为
opened	加载层进入过渡完成后触发
closed	加载层离开过渡完成后触发
rootRef	组件内容根元素引用

AuLoadingSpinner 属性

属性	说明	类型	默认值
size	尺寸：small / default / large	string	default
variant	内置样式：ring / dots / bars / orbit	string	ring
text	加载文字	string	''
color	图标颜色	string	''
spinner	图标组件	Component	null
compact	紧凑布局	boolean	false
svg	可信 SVG 内部标记	string	''
svgViewBox	SVG viewBox	string	0 0 24 24