加载中

VISTA B 不展示组件库默认 Loading 样式。所有加载状态只用 HOMEVISTA 自己的素材，按背景和场景选择。

怎么选

类型	尺寸	动效	适用场景	浅色背景	深色背景
大象转圈	100px	循环	页面内部模块加载	灰色	白色
大象进度	32px	0-100	进入 WALK、VR、GIS 页面时加载	彩色	白色
圆圈转圈	32px / 100px	循环	缩略图、第三方页面、低性能场景	灰色	白色
圆点加载	按移动端底部区域	循环	页面底部加载更多、滚动等待、移动端触底刷新	品牌色	品牌色

大象转圈

用于页面内部模块加载，尺寸为 100px。

灰色：浅色背景

白色：深色背景

大象进度

用于进入 WALK、VR、GIS 页面时加载，尺寸为 32px。

彩色：浅色背景

白色：深色背景

圆圈转圈

用于更轻的加载场景。

灰色：缩略图加载 32px

白色：缩略图加载 32px

灰色：第三方页面加载 100px

白色：第三方页面加载 100px

圆点加载

用于页面底部的加载更多。

前端写法

JSON 是动效文件，页面需要用 Lottie 播放。GIF 只适合没有播放器时临时看效果。

<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref} from "vue";
import lottie, {type AnimationItem} from "lottie-web";

const loadingEl = ref<HTMLElement | null>(null);
let loadingAnimation: AnimationItem | null = null;

onMounted(() => {
  if (!loadingEl.value) {
    return;
  }

  loadingAnimation = lottie.loadAnimation({
    container: loadingEl.value,
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "/assets/vista-b/loading/elephant-spin-gray.json"
  });
});

onBeforeUnmount(() => {
  loadingAnimation?.destroy();
});
</script>

<template>
  <div
    v-if="loading"
    ref="loadingEl"
    class="project-loading"
    aria-label="加载中"
  />

  <div v-else>
    页面内容
  </div>
</template>

不要在规范页面展示 Element Plus 默认转圈样式。