Spin 加载中

用于页面和区块的加载中状态。

何时使用

页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。

代码演示

Spin加载中 - 图1

基本用法

一个简单的 loading 状态。

  1. <template>
  2. <div>
  3. <a-spin />
  4. </div>
  5. </template>

Spin加载中 - 图2

容器

放入一个容器中。

  1. <style scoped>
  2. .example {
  3. text-align: center;
  4. background: rgba(0, 0, 0, 0.05);
  5. border-radius: 4px;
  6. margin-bottom: 20px;
  7. padding: 30px 50px;
  8. margin: 20px 0;
  9. }
  10. </style>
  11. <template>
  12. <div class="example">
  13. <a-spin />
  14. </div>
  15. </template>

Spin加载中 - 图3

自定义描述文案

自定义描述文案。

  1. <style scoped>
  2. .spin-content {
  3. border: 1px solid #91d5ff;
  4. background-color: #e6f7ff;
  5. padding: 30px;
  6. }
  7. </style>
  8. <template>
  9. <div>
  10. <a-spin tip="Loading...">
  11. <div class="spin-content">
  12. 我的描述文案是自定义的。。。
  13. </div>
  14. </a-spin>
  15. </div>
  16. </template>

Spin加载中 - 图4

自定义指示符

使用自定义指示符。

  1. <template>
  2. <div>
  3. <a-spin>
  4. <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
  5. </a-spin>
  6. <a-spin :indicator="indicator" />
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. data() {
  12. return {
  13. indicator: <a-icon type="loading" style="font-size: 24px" spin />,
  14. };
  15. },
  16. };
  17. </script>

Spin加载中 - 图5

各种大小

小的用于文本加载,默认用于卡片容器级加载,大的用于页面级加载。

  1. <template>
  2. <div>
  3. <a-spin size="small" />
  4. <a-spin />
  5. <a-spin size="large" />
  6. </div>
  7. </template>

Spin加载中 - 图6

卡片加载中

可以直接把内容内嵌到 Spin 中,将现有容器变为加载状态。

  1. <style scoped>
  2. .spin-content {
  3. border: 1px solid #91d5ff;
  4. background-color: #e6f7ff;
  5. padding: 30px;
  6. }
  7. </style>
  8. <template>
  9. <div>
  10. <a-spin :spinning="spinning">
  11. <div class="spin-content">
  12. 可以点击‘切换’按钮,控制本区域的spin展示。
  13. </div>
  14. </a-spin>
  15. Loading state:<a-switch v-model="spinning" />
  16. </div>
  17. </template>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. spinning: false,
  23. };
  24. },
  25. methods: {
  26. changeSpinning() {
  27. this.spinning = !this.spinning;
  28. },
  29. },
  30. };
  31. </script>

Spin加载中 - 图7

延迟

延迟显示 loading 效果。当 spinning 状态在 delay 时间内结束,则不显示 loading 状态。

  1. <style scoped>
  2. .spin-content {
  3. border: 1px solid #91d5ff;
  4. background-color: #e6f7ff;
  5. padding: 30px;
  6. }
  7. </style>
  8. <template>
  9. <div>
  10. <a-spin :spinning="spinning" :delay="delayTime">
  11. <div class="spin-content">
  12. 可以点击‘切换’按钮,延迟显示 loading 效果。当 spinning 状态在 `delay` 时间内结束,则不显示
  13. loading 状态。
  14. </div>
  15. </a-spin>
  16. Loading state:<a-switch v-model="spinning" />
  17. </div>
  18. </template>
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. spinning: false,
  24. delayTime: 500,
  25. };
  26. },
  27. methods: {
  28. changeSpinning() {
  29. this.spinning = !this.spinning;
  30. },
  31. },
  32. };
  33. </script>

API

参数说明类型默认值
delay延迟显示加载效果的时间(防止闪烁)number (毫秒)-
indicator加载指示符vNode | slot-
size组件大小,可选值为 small default largestring‘default’
spinning是否为加载中状态booleantrue
tip当作为包裹元素时,可以自定义描述文案string-
wrapperClassName包装器的类属性string-

静态方法

  • Spin.setDefaultIndicator({indicator}) 同上 indicator,你可以自定义全局默认元素

    1. Spin.setDefaultIndicator({
    2. indicator: h => {
    3. return <i class="anticon anticon-loading anticon-spin ant-spin-dot"></i>;
    4. },
    5. });
    6. 或者;
    7. Spin.setDefaultIndicator({
    8. indicator: {
    9. render() {
    10. return <i class="anticon anticon-loading anticon-spin ant-spin-dot"></i>;
    11. },
    12. },
    13. });