等待中loading 菊花图CSS 效果实现【Antd spin 源码实现】

最新推荐文章于 2024-05-29 14:22:08 发布
最新推荐文章于 2024-05-29 14:22:08 发布
阅读量6k 收藏
点赞数
分类专栏： css学习+less学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Candy_home/article/details/81540247
版权

缘起：

今天闲来无事，调试一个单页面VUE的效果，94年的开发小哥哥说，让我给他加个菊花图...Excuse me? 菊花图？长这样么？

还是？长这样？简直让我脑洞大开。。

其实呐，他说的是这个。。等待状态，我内心 

 

好了，那怎么实现呐

 

 

第一反应：gif

找个gif 图好麻烦~

想了想、、一定有别的解决方式。

 

 

第二反应：看别的怎么做

第一个想起来宠幸的就是Antd，毕竟是我用的最多的库~

来我们去看看antd的loading怎么做的，点进去发现

最低0.47元/天 解锁文章
Candy_home
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单菊花加载图css动画实现
qq_45428582的博客
05-26 414
效果： // LESS代码 main { display: grid; /* 简单栅格布局 */ grid-template: repeat(3, 1fr)/repeat(3, 1fr); div.container {/*居中设置*/ grid-row: 2/3; grid-column: 2/3; display: flex; justify-conten
kendo listview 从服务器读取数据时加载菊花图(loading...)解决方案.
weixu416的博客
04-25 895
这是第一篇blog,, 本人语文作文都不及格的,,,记性也越来越不好, 想通过写blog,,以后项目遇到的问题可以翻起来看看.,, 这里将记录我成长过程遇到的各种问题, ----------------------------正文----------------------- 项目主要框架:requirejs+jq+kendo 功能需求: 在读取数据
《精通react/vue组件设计》之5分钟教你实现一个极具创意的加载(Loading)组件
趣谈前端
02-11 1249
前言本文是笔者写组件设计的第八篇文章, 今天带大家用5分钟实现一个极具创意的加载(loading)组件.涉及的核心知识点主要是css3相关特性, 如果大家非常熟悉,可直接跳过介绍直接看正...
html等待中动画,等待中loading 菊花图CSS 效果实现【Antd spin 源码实现】
weixin_28972665的博客
06-07 604
缘起：今天闲来无事，调试一个单页面VUE的效果，94年的开发小哥哥说，让我给他加个菊花图...Excuse me? 菊花图？长这样么？css仍是？长这样？简直让我脑洞大开。。html 其实呐，他说的是这个。。等待状态，我心里antd 好了，那怎么实现呐spa第一反应：gif找个gif 图好麻烦~调试想了想、、必定有别的解决方式。code第二反应：看别的怎么作第一个想起来宠幸的就是Antd，毕竟是...
antd table列选中效果实现
最新发布
花姐夫JUN的博客
05-29 966
开发中有一个需要呈现不同时间点各个气象要素的值需求，我觉得一个table可以实现这类数据的展示，只是因为时间点时关注的重点，所以需要列选中效果，清晰的展示时间点下的要素数据。我选择的是antd的table组件，这个组件没有列选中的效果，所以还是需要自己动手丰衣足食，改造一下。这个功能的难点在于列选中效果，我们需要给他一个背景加上边框，虽然antd的table没有列选中效果，但是它提供了customCell，customHeaderCell，我们可以根据这些回调函数的特点灵活使用实现列选中效果。 效果
css实现Ant Design中菊花图loading效果
qq_37200686的博客
03-26 1025
一、布局 <body> <div> <span> <i></i><i></i><i></i><i></i> </span> </div> </body> ...
Ant-Design源码分析——Spin
qq_46025739的博客
12-26 979
2021SC@SDUSC 定义接口信息 export interface SpinProps { // 前缀信息 prefixCls?: string; // 类名 className?: string; // 是否旋转（加载中） spinning?: boolean; // 样式 style?: React.CSSProperties; // 尺寸 size?: SpinSize; // 自定义文案 tip?: string; // 延迟加载时间（
给大家推荐一个简洁易用的CSS3菊花loading效果
06-12
效果描述： 现在普通的一个gif菊花loading效果已经很难满足用户的需求了 时间就是成本，如果让用户在等待的时间内可以欣赏到更加好看的loading效果 想必对于用户来说，等待也是一种享受，忠诚度自然会更高 在以前，基本上都是一个默认的GIF动画，多一个http请求不说，用户已经看烦了 今天给大家推荐的这个CSS3动画效果，画面更美，且不需要额外加载图片，只要部分HTML和CSS即可 占用带宽更少，用户体验更好 使用方法： 1、将style.css样式引入到网页中 2、将body中的代码部分拷贝到你需要的地方即可
html5+css如何实现中间大两头小的轮播效果
09-22
在本文中，我们将探讨如何使用HTML5和CSS来创建一个具有独特布局的轮播效果，即中间图片较大，而两端的图片较小。这种效果能够为网站的视觉展示增添层次感和动态感，吸引用户的注意力。 首先，我们创建一个基本的...
react实现antd线上主题动态切换功能
12-09
在React应用中实现Ant Design的在线主题动态切换功能是一项常见的需求，特别是在有多个主题共存的情况下。本示例是基于`create-react-app`构建的React应用，并结合了`mobx`状态管理库、`webpack5`打包工具以及`antd`...
详解使用create-react-app添加css modules、sasss和antd
10-18
在本文中，我们将深入探讨如何使用`create-react-app`来集成`css modules`、`sass`以及`antd`这个流行的React UI组件库。`create-react-app`是Facebook提供的一个快速初始化React项目的工具，它默认提供了基础的配置...
Android仿ios加载loading菊花图效果
01-05
项目中经常会用到加载数据的loading显示图，除了设计根据app自身设计的动画loading，一般用的比较多的是仿照ios 的菊花加载loading 图，当然一些条件下还会涉及到加载成功/ 失败情况的显示，还有显示文字。   使用ProgressBar 来加载动画转圈，这里使用drawable文件 定义转圈动画， indeterminateDrawable 属性进行加载。 <?xml version=1.0 encoding=utf-8?> <animated-rotate xmlns:android=http://schemas.android.com/apk/res/andr
Vue 全局loading组件实例详解
12-09
上图不上种，菊花万人捅： loading.js: import './loading.css' let Loading = {} // 避免重复install，设立flag Loading.installed = false Loading.install = function (Vue) { if (Loading.installed) return Vue.prototype.$loading = {} Vue.prototype.$loading.show = () => { // 如果页面有loading则不继续执行 if (document.querySelector
antd组件Upload实现自己上传的实现示例
10-17
在本文中，我们将深入探讨如何使用Ant Design（antd）组件库中的`Upload`组件来实现自定义上传功能。Ant Design是一个流行的React UI框架，提供了一系列美观且实用的组件，其中包括`Upload`，用于处理文件上传操作。...
CSS3组件化之菊花loading
weixin_30865427的博客
04-30 294
<div class="juhua-loading"> <div class="jh-circle"></div> <div class="jh-circle2 jh-circle"></div> <div class="jh-circle3 jh-circle"></div> <...
android的UI中经常出现的菊花圈（圆形的加载圈）
有酒平步上青天
01-12 5296
夜深也是无聊，翻看以前的老代码，发现那个我们经常用的菊花圈，原来是帧动画做的，有点意思。突然感觉帧动画做的东西效果不错啊，至少看起来听耐看的。开工上代码： 先是布局文件： <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.andro
css3动画实现类菊花loading效果
weixin_30888413的博客
07-30 281
实现一个loading效果，需要分平台来考虑。 1.在PC端，因为IE9及其以下的版本实现不了CSS3动画效果，所以用CSS3是实现不了的，在这里比较建议使用gif的动态图片来实现，能兼容各主流浏览器。 在这里介绍一个很好用的在线loading生成工具，方便、快捷！http://preloaders.net/en/circular 2.在移动端，不考虑winphone上低版本的浏览器时（wi...
安卓设置菊花动画_Android仿ios加载loading菊花图效果
weixin_39640008的博客
12-20 368
项目中经常会用到加载数据的loading显示图，除了设计根据app自身设计的动画loading，一般用的比较多的是仿照ios 的菊花加载loading 图，当然一些条件下还会涉及到加载成功/ 失败情况的显示，还有显示文字。使用ProgressBar 来加载动画转圈，这里使用drawable文件 定义转圈动画， indeterminateDrawable 属性进行加载。android:drawabl...
html ajax 菊花,ajax加载菊花loading效果
weixin_39748928的博客
06-16 270
Ajax异步请求的时候，一般都会利用一个动态的gif小图片来制作一个Ajax Loading，以便增加用户体验。这里我们可以使用Spin.js，该js脚本压缩后5k，可以不用任何图片，任何外部CSS样式，就可以创建一个Ajax Loading指示器。我们可以在链接页面中，动态设置样式，就会自动生成样式的配置脚本：设置之后，下图就是我们需要配置的样式：一、显示菊花loadingvar opts = ...
小程序中如何根据antd中popover的源码来实现小程序中的popover
08-05
在小程序中实现类似Antd中的popover功能，可以参考以下步骤： 1. 首先，在小程序中创建一个自定义组件，可以将其命名为Popover，用于实现popover的功能。可以使用小程序原生的基础组件，例如view和text来实现。 2....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值