vue-spinner文档

### Vue-Spinner 官方文档与使用指南

对于 `vue-simple-spinner`，官方推荐访问其 GitHub 页面获取最详细的文档和支持信息[^1]。通常这类库会在GitHub页面提供安装方法、基础用法以及一些高级特性说明。

而对于 `vue-spinners`，该项目同样托管于 GitHub 上，在提供的链接中可以找到完整的API文档和实例代码[^2]。以下是基于这两个资源整理的基础使用指导：

#### 安装依赖
无论是哪种spinner组件，都需要先通过npm或yarn将其加入到项目当中。

npm install vue-simple-spinner --save # 对应简单版Spinner
# 或者
npm install @saeris/vue-spinners --save # 针对更丰富的Spinners集合

#### 基本引入方式
在Vue单文件组件内局部注册所需组件：

import { Circle } from '@saeris/vue-spinners'; // 导入特定类型的加载动画
export default {
  name: 'App',
  components: {
    Circle, // 注册为本地可用标签
  }
}

或者全局范围内应用这些组件以便在整个应用程序中重复调用它们而无需每次都单独导入。

#### HTML模板部分
定义好相应的HTML结构来展示spinners效果：

<template>
<div id="app">
  <!-- 使用已注册的名字作为自定义元素 -->
  <circle v-if="loading"></circle> 
</div>
</template>

<script>
// ...省略前面提到过的script内容...
data() {
return {
  loading: true,
};
},
mounted(){
setTimeout(() => this.loading=false ,3000); //模拟异步操作完成后的状态切换
}
</script>

上述例子展示了如何创建一个简单的圆形旋转进度条，并且设置了一个定时器用来模仿数据请求完成后隐藏该指示符的行为。