Spin加载中（antd-design组件库）loading效果简单使用

缺乏、安全感 2023-10-12 09:51 56阅读 0赞

## **1.****Spin加载中** ##

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

## **2.****何时使用** ##

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

组件代码来自： [加载中 Spin - Ant Design][Spin - Ant Design]

## **3.****本地验证前的准备** ##

参考文章【[react项目+antd组件-demo:hello-world\_西晋的no1的博客-CSDN博客][react_antd_-demo_hello-world_no1_-CSDN]】，将 [加载中 Spin - Ant Design][Spin - Ant Design] 中需要在本地使用的代码复制覆盖**App2.js**中的全部代码，启动代码，可在本地查看现象和更改代码。

## **4.****本地验证Spin的****3****种尺寸** ##

复制下图所示代码，了解Spin的3种尺寸和对应尺寸的使用场景

![254d80678c4240e4b6fbe270b7e0ad74.png][]

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

## **5.****本地验证控制Spin的显示和隐藏以及包含其他标签** ##

在使用Spin过程中，需要用一个变量来控制其显示和隐藏，参考官方示例，

复制下图所示代码，体验如何用一个变量来控制Spin的显示和隐藏以及如何将内容内嵌到 Spin 中，将现有容器变为加载状态。

<Spin spinning=\{ loading\}>

<Alert \*\*\*

/>

</Spin>

![fc62ce252c3d4a17b45f4668c54f9ae0.png][]

本文仅介绍了组件Spin的部分内容，更多内容请参阅官方文档： [加载中 Spin - Ant Design][Spin - Ant Design]

[Spin - Ant Design]: https://ant.design/components/spin-cn
[react_antd_-demo_hello-world_no1_-CSDN]: https://blog.csdn.net/xijinno1/article/details/130979732
[254d80678c4240e4b6fbe270b7e0ad74.png]: https://img-blog.csdnimg.cn/254d80678c4240e4b6fbe270b7e0ad74.png
[fc62ce252c3d4a17b45f4668c54f9ae0.png]: https://img-blog.csdnimg.cn/fc62ce252c3d4a17b45f4668c54f9ae0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，56人围观）

还没有评论，来说两句吧...

相关阅读

相关 Spin加载中（antd-design组件库）loading效果简单使用

1.Spin加载中用于页面和区块的加载中状态。 2.何时使用页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。组件代码来自：

缺乏、安全感/ 2023年10月12日 09:51/ 0 赞/ 57 阅读

相关 Leaflet中使用Leaflet.Spin插件实现地图加载等待效果

场景 Leaflet快速入门与加载OSM显示地图： [Leaflet快速入门与加载OSM显示地图\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][L

拼搏现实的明天。/ 2023年10月01日 12:33/ 0 赞/ 37 阅读

相关 Qml控件之Spin加载中

> Spin(加载中)控件是基于Qml实现的，它兼容于`QtQuick 1.x`和`QtQuick 2.x`。可用于页面和区块的加载中状态。 1. 演示 ![demo.

朴灿烈づ我的快乐病毒、/ 2022年12月31日 13:27/ 0 赞/ 165 阅读

相关自定义加载loading效果（带图片）

`加载中图片，底色为白色(看不到)` ![在这里插入图片描述][20200913105608103.png_pic_center] 效果如图： ![在这里插入图片描述

青旅半醒/ 2022年12月06日 12:42/ 0 赞/ 236 阅读

相关自定义加载中的loading组件

自定义加载中的loading组件 `components / loading.vue页面` <template> <div class="loadi

男娘i/ 2022年12月03日 15:59/ 0 赞/ 171 阅读

相关 react-native 加载动画 loading效果

react-native loading动画（加载动画） 1. 组件代码(demo.js) 2. 调用 3. FAQ ![

朴灿烈づ我的快乐病毒、/ 2022年08月29日 15:53/ 0 赞/ 518 阅读

相关关于ie中easyui form组件load事件无法多次加载数据

在easyui中form load事件是这样用的的 <table style="border-collapse:collapse; border-spacing:0px; b

妖狐艹你老母/ 2022年08月27日 03:38/ 0 赞/ 133 阅读

相关 Spin.js旋转的加载动画

转载文章：[前端新兵][Link 1] 看到Spin官网的介绍：Uses VML as fallback in IEs，说是老的IE使用VML制作效果，IE6也支持，不

爱被打了一巴掌/ 2022年08月13日 11:48/ 0 赞/ 164 阅读

相关 ant组件---spin

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

ゝ一纸荒年。/ 2022年04月22日 11:44/ 0 赞/ 360 阅读

相关 Ajax加载数据中的loading效果

如题，不难理解，故不多做介绍，直切主题。在html任意位置放置loading图标： <div id="cisLoading"> <img src="/s

深碍√TFBOYSˉ_/ 2022年02月01日 00:06/ 0 赞/ 456 阅读