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

news2024/11/29 5:30:10

1.Spin加载中

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

2.何时使用

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

组件代码来自: 加载中 Spin - Ant Design

3.本地验证前的准备

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

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

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

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

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

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

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

<Spin spinning={loading}>

 <Alert ***

/>

</Spin>

    

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/607121.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PyTorch深度学习实战(2)——PyTorch基础

PyTorch深度学习实战&#xff08;2&#xff09;——PyTorch基础 0. 前言1. 搭建 PyTorch 环境2. PyTorch 张量2.1 张量初始化2.2 张量运算2.3 张量对象的自动梯度计算 3. PyTorch 张量相对于 NumPy 数组的优势小结系列链接 0. 前言 PyTorch 是广泛应用于机器学习领域中的强大开…

AutoHotKey脚本初步:判断和选择

文章目录 脚本基础连击识别setTimer判断和选择 脚本基础 尽管通过窗口识别与按键映射&#xff0c;就可以胜任很多工作了&#xff0c;但AutoHotKey仍提供了一些简单的编程功能&#xff0c;对一些稍微复杂的任务&#xff0c;也可以做到得心应手。但要注意一点&#xff0c;AHK的V…

【操作系统】Linux 中的 Page Cache

【操作系统】Linux 中的 Page Cache 参考资料&#xff1a; 文件 I/O 简明概述 - page cache 进程写文件时&#xff0c;进程发生了崩溃&#xff0c;已写入的数据会丢失吗&#xff1f; Linux Page Cache 调优在 Kafka 中的应用 【操作系统】一文带你深入浅出零拷贝技术 【操作系…

大数据Doris(三十四):Doris配置Spark与Yarn

文章目录 Doris配置Spark与Yarn 一、Doris配置Spark 1、配置 SPARK_HOME 环境变量 2、配置SPARK 依赖包

JavaScript之BOM(八)

JavaScript之BOM 1、BOM中的对象2、window对象2.1、简介2.2、常用的属性与方法2.3、常用的事件2.4、定时器和延时器 3、navigator 常用属性与方法4、history 常用属性与方法5、location 常用属性与方法 BOM&#xff1a;浏览器对象模型&#xff08;Browser Object Model&#xf…

交直流系统潮流计算及相互关联特性分析(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

chatgpt赋能python:Python取消合并单元格

Python取消合并单元格 在Excel中&#xff0c;合并单元格是一个非常常见的操作&#xff0c;它可以将多个单元格合并成一个单元格。这样可视化效果会更好&#xff0c;但是实际上会影响数据的计算和操作。如果你想取消这个操作&#xff0c;手工操作可能会非常费时间。不过&#x…

chatgpt赋能python:Python变量赋值

Python 变量赋值 在 Python 中&#xff0c;我们可以使用多种符号来给变量赋值。本文将介绍这些符号以及它们在编程中的应用。 等号&#xff08;&#xff09; 在 Python 中&#xff0c;我们最常用的符号是等号&#xff08;&#xff09;&#xff0c;它可以将一个值赋给一个变量…

Image fusion based on generative adversarial network consistent with perception

1.摘要 深度学习是红外和可见光图像融合领域中快速发展的方法。在这个背景下&#xff0c;密集块在深层网络中的使用显著提高了浅层信息的利用率&#xff0c;并且生成对抗网络&#xff08;GAN&#xff09;的组合也提高了两个源图像的融合性能。我们提出了一种基于密集块和GAN的…

“吴军讲ChatGPT“课程的个人总结

人工智能时代, ChatGPT如此火热, 大家恐慌, 焦虑, 大家最关注的是两个问题 我会不会被取代?我有没有机会? 吴军老师(浪潮之巅, 数学之美等), 有门课程, <吴军讲ChatGPT>, 用通俗易懂的语言, 讲解了人工智能的技术原理前世今生,以及当下火热的ChatGPT的可以做什么, 那…

关于windows驱动中断的几个小问题

1. intel 8259芯片中的IRQ2和int2的区别是什么&#xff1f; 答曰&#xff1a;IRQ2是芯片上的引脚&#xff0c;而int2是中断向量表的第2项&#xff0c;两者有很大区别。 Intel8259A芯片的中断引脚分别为&#xff1a; 主片&#xff1a; 0&#xff1a;8254时钟 1&#xff1a;键盘 …

chatgpt赋能python:**Python取余符号:了解%运算符的作用和用法**

Python取余符号&#xff1a;了解%运算符的作用和用法 作为一名有着10年编程经验的工程师&#xff0c;我对Python这门编程语言深有了解。在本文中&#xff0c;我将详细介绍Python的取余符号&#xff0c;即%运算符&#xff0c;其作用和用法。 什么是Python取余符号&#xff1f;…

AIGC技术研究与应用 ---- 下一代人工智能:新范式!新生产力!(2.3-大模型发展历程 之 多模态)

文章大纲 什么是多模态stable diffusion“ CLIP 其他模型”成为通用的做法多模态模态生成&#xff1a;文字生成图像取得突破&#xff0c;其他领域仍有待提升参考文献与学习路径GPT 系列模型解析前序文章模型进化券商研报陆奇演讲多模态 什么是多模态 多模态生成&#xff0c; …

PAT A1164 Good in C

1164 Good in C 分数 20 作者 陈越 单位 浙江大学 When your interviewer asks you to write "Hello World" using C, can you do as the following figure shows? Input Specification: Each input file contains one test case. For each case, the first pa…

信息论与编码 SCUEC DDDD 期末复习

1.证明熵的可加性 2.假设一帧视频图像可以认为是由3*10的五次方个像素组成&#xff08;每像素均独立变化&#xff09;&#xff0c;如果每个像素可取128个不同的等概率亮度表示。请计算出每帧图像含多少信息量&#xff1f;若有一口述者在约12000个汉字的字汇中选400个字来口述此…

计算机网络|第五章:网络层:控制平面

目录 &#x1f4da;概述 &#x1f4da;路由选择算法⭐️ &#x1f407;链路状态路由选择算法 ⭐️Dijkstra算法 &#x1f407;距离向量路由选择算法 ⭐️DV算法 &#x1f407;LS与DV路由选择算法的比较 &#x1f4da;因特网中自洽系统内部的路由&#xff1a;OSPF &…

chatgpt赋能python:Python取消关机:让你摆脱关机的烦恼

Python取消关机&#xff1a;让你摆脱关机的烦恼 作为一名有10年Python编程经验的工程师&#xff0c;我深知电脑在工作中的重要性和关机时带来的不便。有的时候你可能会忘记保存数据&#xff0c;或是需要长时间运行的程序正在进行&#xff0c;而突然被迫关机是非常让人头疼的。…

chatgpt赋能python:Python是炒股的好工具吗?——一个有10年python编程经验的工程师的分析

Python 是炒股的好工具吗&#xff1f;—— 一个有10年python编程经验的工程师的分析 作为一个有10年python编程经验的工程师&#xff0c;我深深地了解了Python的能力和潜力。 它不仅是一种流行的编程语言&#xff0c;还是一个强大的功能开发平台。它包括很多库&#xff0c;如P…

Maven高级——继承与聚合——继承关系实现

将Maven拆分成多个项目之后又会引发新的问题&#xff0c;继承与聚合就是用来解决这些问题。 这里的继承就像java中类和类之间的继承一样&#xff0c;工程之间也是可以实现继承的。 继承解决的问题 在之前拆分的三个模块中每个都配置了一个lombok的依赖&#xff0c;每一个mav…

【ARMv8 SIMD和浮点指令编程】NEON 减法指令——减法也好几种

向量减法包括常见的普通加指令&#xff0c;还包括长减、宽减、半减、饱和减、按对减、按对加并累加、选择高半部分结果加、全部元素加等。 1 SUB 减法&#xff08;向量&#xff09;&#xff0c;该指令从第一个源 SIMD&FP 寄存器中的相应向量元素中减去第二个源 SIMD&…