Loader
为结果尚未返回的操作选择紧凑动态指示器。
适用场景
- 当界面需要以下行为时使用 Loader：为结果尚未返回的操作选择紧凑动态指示器。
安装
选择安装方式，用法示例将同步更新导入路径。
$ bunx --bun shadcn-vue@2.8.2 add https://orvui.efu.me/r/loader.json
首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。
示例
预览
LoadingSpinner
LoadingDots
LoadingBars
LoadingDot Matrix
LoadingDither
LoadingMorph
LoadingComet
LoadingMetaballs
LoadingNewton
LoadingHelix
LoadingScramble
LoadingPercent
LoadingASCII
LoadingASCII Line
LoadingASCII Braille
LoadingASCII Blocks
LoadingASCII Bounce
packages/vue/src/motion/loader/demo.vue
<script setup lang="ts">
import { Loader, type LoaderVariant } from "@/components/orvui/motion/loader";
const variants: [LoaderVariant, string][] = [
["spinner", "Spinner"], ["dots", "Dots"], ["bars", "Bars"], ["dot-matrix", "Dot Matrix"], ["dither", "Dither"],
["morph", "Morph"], ["comet", "Comet"], ["metaballs", "Metaballs"], ["newton", "Newton"], ["helix", "Helix"],
["scramble", "Scramble"], ["percent", "Percent"], ["ascii", "ASCII"], ["ascii-line", "ASCII Line"],
["ascii-braille", "ASCII Braille"], ["ascii-blocks", "ASCII Blocks"], ["ascii-bounce", "ASCII Bounce"],
];
</script>
<template><div class="flex flex-wrap items-center justify-center gap-8 p-8">
<div v-for="[variant, label] in variants" :key="variant" class="flex flex-col items-center gap-4"><Loader :variant="variant" :size="36" /><span class="text-xs text-muted-foreground">{{ label }}</span></div>
</div></template>
packages/vue/src/motion/loader/src/Loader.vue
状态与事件
此示例组合没有声明成对的受控属性与 update 事件。使用已列出的属性、原生事件和插槽组合内容；不要为它添加未公开的 v-model。
API 参考
variant?"morph" | "bars" | "metaballs" | "dots" | "spinner" | "dot-matrix" | "dither" | "ascii" | "ascii-line" | "ascii-braille" | "ascii-blocks" | "ascii-bounce" | "comet" | "scramble" | "newton" | "helix" | "percent""spinner"size?number32speed?number1label?string"Loading"无障碍
为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。
常见问题
- 如何配置 Loader？
- 通过 variant、size、speed、label 配置 Loader；API 表列出其类型与默认值。
- 如何连接到应用状态？
- 通过文档中的组合方式提供内容，应用副作用由调用方管理。
- 可以在服务端渲染吗？
- 可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。
更新于
来源与许可 ↗MIT · 0.1.1