Loading 加载

用于指示内容正在加载或处理中。基于 BrConfigProvider 实现全局主题配置，支持内联/全屏两种加载模式。

组件特性

⏳ 5 种视觉变体：支持 spinner、ring、bar、wave、dots 加载指示器。
📏 4 种尺寸：支持 sm、md、lg、xl 尺寸。
🌈 颜色控制：支持 color 属性控制指示器颜色。
📝 文字加载：支持在加载指示器旁显示文字。
🖥️ 全屏模式：支持全屏覆盖加载。
❌ 禁用：支持 disabled 属性。
🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

基础用法

最简单的加载指示器。

<script setup>
import { BrLoading } from '@breezeui/vue';
</script>

<template>
  <div class="flex items-center space-x-4">
    <BrLoading />
    <BrLoading variant="dots" />
    <BrLoading variant="ring" />
    <BrLoading variant="pulse" />
  </div>
</template>

不同变体与尺寸

支持 spin, ring, pulse, dots, bar 五种变体，以及 sm, md, lg, xl 四种尺寸。

<script setup>
import { BrLoading } from '@breezeui/vue';
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex items-center gap-4">
      <BrLoading size="sm" />
      <BrLoading size="md" />
      <BrLoading size="lg" />
      <BrLoading size="xl" />
    </div>
    <div class="flex items-center gap-4">
      <BrLoading variant="dots" size="sm" />
      <BrLoading variant="dots" size="md" />
      <BrLoading variant="dots" size="lg" />
      <BrLoading variant="dots" size="xl" />
    </div>
    <div class="w-full max-w-xs space-y-2">
      <BrLoading variant="bar" :progress="30" size="sm" />
      <BrLoading variant="bar" :progress="60" size="md" />
    </div>
  </div>
</template>

内联与文字提示

使用 inline 属性可以使加载器与文字同行显示，使用 text 属性添加提示文字。

<script setup>
import { BrLoading, BrButton } from '@breezeui/vue';
</script>

<template>
  <div class="flex flex-col gap-4">
    <BrButton disabled>
      <BrLoading variant="spin" size="sm" inline class="mr-2" />
      Saving...
    </BrButton>

    <div class="flex items-center gap-2 text-sm text-muted-foreground">
      <BrLoading variant="dots" size="sm" inline />
      <span>Data is loading...</span>
    </div>

    <BrLoading variant="spin" text="Loading data..." />

    <BrLoading variant="bar" :progress="45" text="Uploading" class="w-64" />
  </div>
</template>

全屏遮罩

使用 fullscreen 属性可以覆盖全屏，常用于页面跳转或重要操作等待。

<script setup>
import { ref } from 'vue';
import { BrLoading, BrButton } from '@breezeui/vue';

const isLoading = ref(false);
const toggleLoading = () => {
  isLoading.value = true;
  setTimeout(() => (isLoading.value = false), 3000);
};
</script>

<template>
  <BrButton @click="toggleLoading">Show Fullscreen Loading</BrButton>
  <BrLoading v-if="isLoading" fullscreen text="Preparing..." variant="dots" size="lg" />
</template>

主题定制

通过 BrConfigProvider 全局配置或 CSS 变量局部覆盖。

<script setup>
import { BrConfigProvider, BrLoading } from '@breezeui/vue';

const theme = {
  primary: '#10B981', // Emerald 500
  zLoading: 100,
  transitionDuration: '500ms', // Slower animation
};
</script>

<template>
  <BrConfigProvider :theme="theme">
    <div class="flex items-center gap-4">
      <BrLoading variant="spin" size="lg" />
      <BrLoading variant="ring" size="lg" />
      <BrLoading variant="dots" size="lg" />
      <BrLoading variant="bar" :progress="70" class="w-32" />
    </div>
  </BrConfigProvider>
</template>

自定义颜色与大小

直接通过 Props 传递颜色和尺寸。

<script setup>
import { BrLoading } from '@breezeui/vue';
</script>

<template>
  <div class="flex items-center gap-4">
    <BrLoading color="#E11D48" />
    <BrLoading color="#8B5CF6" variant="dots" />
    <BrLoading :custom-size="40" variant="ring" />
    <BrLoading :speed="2" text="Fast!" />
  </div>
</template>

API

BrLoading

属性	类型	默认值	说明
variant	`'spin' \| 'ring' \| 'pulse' \| 'dots' \| 'bar'`	`'spin'`	加载动画变体
size	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	尺寸
color	`string`	-	自定义颜色
customSize	`string \| number`	-	自定义尺寸（宽/高）
fullscreen	`boolean`	`false`	是否显示全屏遮罩
inline	`boolean`	`false`	是否内联显示
text	`string`	-	加载提示文字
progress	`number`	-	进度值（0-100），仅 `bar` 变体或配合文字使用
disabled	`boolean`	`false`	是否禁用（变淡/不可点击）
speed	`number`	`1`	动画速度倍率

BrLoadingSpinner

属性	类型	默认值	说明
variant	`'spin' \| 'ring' \| 'pulse'`	`'spin'`	动画变体
size	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	尺寸
color	`string`	-	颜色
customSize	`string \| number`	-	自定义尺寸
speed	`number`	`1`	速度

BrLoadingDots

属性	类型	默认值	说明
size	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	尺寸
color	`string`	-	颜色
customSize	`string \| number`	-	自定义尺寸
speed	`number`	`1`	速度

BrLoadingBar

属性	类型	默认值	说明
size	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	尺寸
color	`string`	-	颜色
progress	`number`	-	进度值
speed	`number`	`1`	速度

#Loading 加载

#组件特性

#基础用法

#不同变体与尺寸

#内联与文字提示

#全屏遮罩

#主题定制

#自定义颜色与大小

#API

#BrLoading

#BrLoadingSpinner

#BrLoadingDots

#BrLoadingBar