分享一些Loading画面源码~

最新推荐文章于 2021-10-25 11:44:33 发布
最新推荐文章于 2021-10-25 11:44:33 发布
阅读量409 收藏
点赞数
文章标签： 前端 ui 移动开发 ViewUI
原文链接：https://my.oschina.net/moketsz/blog/611810
版权

别具创意的HTML5+CSS3 loading加载动画效果

摘要: 过去HTML5还未盛行开来，多数网站的loading动画采用GIF制作，如今看起来已经显得low了，而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足。本文整理了几十个HTML5和CSS3实现的loading动画效果。 ... ...

　　在这个互联网信息风靡时代，各网站无论在用户体验还是UI设计方面，都想尽办法夺取用户青睐，大到网页整体布局，小到加载缓存，都紧密影响着用户的来去。过去HTML5还未盛行开来，多数网站的loading动画采用GIF制作，如今看起来已经显得low了，而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足。这已经成为一种趋势。


　　本文共收集整理了几十个基于HTML5和CSS3实现的loading动画效果，希望能为今后的开发派上用场，大家按需索取。


　　01. CSS Rainbow Loader


30193135_Dg8I.jpg


　　Demo      Download


　　02. Single element Slack loader


30193135_yf74.jpg


　　Demo     Download


　　03. Pure CSS3 loader


30193135_lx14.jpg


　　Demo     Download


　　04. CSS Cog loader


30193136_HAEG.jpg


　　Demo    Download


　　05. VSCO – CSS loader


30193136_002M.jpg


　　Demo      Download


　　06. Cube CSS Loader


30193136_azxr.jpg


　　Demo    Download


　　07. CSS Loader


30193136_VHYd.jpg


　　Demo     Download


　　08. Tumblr-style cog loaders


30193137_XiS9.jpg


　　Demo     Download


　　09. CSS Weather Loader


30193137_2ax5.jpg


　　Demo      Download


　　10. Chrome Cast CSS Loader


30193137_GdlA.jpg


　　Demo      Download


　　11. CSS3 Loaders


30193137_93uq.jpg


　　Demo     Download


　　12. Android 4.4 Kitkat loader


30193138_h2c7.jpg


　　Demo     Download


　　13. CSS loaders kit


30193138_2BZ2.jpg


　　Demo     Download


　　14. CSS creative loading


30193139_zzyq.jpg


　　Demo    Download


　　15. CSS Loading Animation


30193139_ZYbS.jpg


　　Demo     Download


　　16. Logo Loader


30193139_j5te.jpg


　　Demo     Download


　　17. Loaders collection by Loaders.css


30193139_GZe0.jpg


　　Demo      Download


　　18. CSS Water filling Loader


30193140_EgX8.jpg


　　Demo     Download


　　19. CSS loader


30193140_EFR5.jpg


　　Demo      Download


　　20. Animated CSS3 Loading Bar


30193140_jJHQ.jpg


　　Demo     Download


　　21. CSS loading text animation


30193141_GGQD.jpg


　　Demo     Download


　　22. Simple Loader


30193141_ZCXE.jpg


　　Demo     Download


　　23. CSS Loading animation


30193141_j2lb.jpg

　　Demo    Download


　　24. CSS loader


30193141_IopT.jpg


　　Demo      Download


　　25. Pushing pixels CSS loader


30193141_OGji.jpg


　　Demo     Download


　　26. CSS Loader


30193142_kYgr.jpg


　　Demo     Download


　　27. CSS Loaders


30193142_rbwu.jpg


　　Demo     Download


　　28. Random Loader


30193142_Ooqx.jpg


　　Demo     Download


　　29. Single element CSS spinners


30193142_2jLr.jpg


　　Demo     Download


　　30. Simple CSS loader


30193143_dfTZ.jpg


　　Demo     Download


　　31. SpinKit – CSS loaders


30193143_aZcr.jpg


　　Demo     Download


　　32. Modern Google Loader


30193143_A5Ej.jpg


　　Demo     Download


　　33. 2D and 3D Block Loaders


30193143_5BQJ.jpg


　　Demo     Download


　　Other Loaders and Preloaders


　　34. 12 free SVG loaders


30193144_AC1O.jpg


　　Demo     Download


　　35. Page Loading Effects


30193144_6eL2.jpg


　　Demo     Download


　　36. Pace.js – Page Load Progress Bars


30193145_thuU.jpg


　　Demo      Download


　　37. Loading SVG loaders


30193145_QFC3.jpg


　　Demo      Download


　　38. Material Design preloader


30193145_5Oy7.jpg


　　Demo      Download

　　 整理自： instantshift

　　 来源：前端观察

转载于:https://my.oschina.net/moketsz/blog/611810

chmichyn94160
关注
iOS转场弹窗、网易云音乐动效、圆环取色器、Loading效果等源码
sunnyaigd830的博客
12-06 413
iOS精选源码 view controller transition and popover （控制器转场和弹窗） UITableView头部悬停+UITableView侧滑嵌套 一行代码集成时间选择器 iOS仿滴滴时间选择picker BMMusicPlaye,使用ASDK,爱奇艺tabbar动画，网易云音乐播放器动效 圆环取色剂 iOS 一个轻量级的组件化思路 JHVerific...
GPUImage 源码分析
crazy_jack
05-02 1849
GPUImage源码解读 介绍 GitHub - cats-oss/android-gpuimage: Android filters based on OpenGL (idea from GPUImage for iOS) 做图片或者视频滤镜渲染，离不开 OpenGL，而在移动平台上最令人熟知的就是 GitHub - BradLarson/GPUImage2: GPUImage 2 is ...
教程源码Loading
08-14
本文档为本人原创教程的例子源码，供读者下载。
炫酷的loading动画源码
宠辱不惊，看庭前花开花落；去留无意，望天上云卷云舒
05-25 547
黑色科技SVG动画先记录一下，有时间再去搬代码
一个不错的js loading源码
RainsSoft
06-19 574
JS Bin .progress{ position: fixed; top: 0; right: 0; left: 0; height: 20px; background: #f5f5f5; border-bottom: 1px soli
10种纯css3制作的loading效果和源码分享
qq_35515563的博客
05-02 4233
10种纯css3制作的loading效果和源码分享 效果一： loading-01 body { text-align: center; overflow: hidden; padding: 50px; } .csshub-loader{ position: relative; width: 80px; height: 80px;
圆形进度条和圆形loading源码
01-24
圆形进度条和圆形loading源码,仅供大家学习，望大家多多支持
Android40个经典源码
07-08
Android PDF 阅读器源码 2 Android Txt文本阅读器源码 3 Android SqliteManager 源码 4 Android 个人记账程序源码 5 android 多点触控实例源码 ...40 android源码分享之带手势划动功能的日历源码
史上最全的ios开发源码
04-17
视图切换类--zaker应用进入画面效果 视图切换之视图切换大小渐变效果 手势交互--物体根据重力感应运动 手势交互之Drag View 手势交互之Touch Visualizer 图表类 图表--百分比圆环 图表类--Percentage Chart 图表类...
各种加载loading，代码齐全
12-21
/* * 考虑一下状态？ * 1、Email输入框获取焦点、输入时候 input * 2、密码框获取焦点、输入时候 password * 3、密码错误时 error * 4、密码正确时 ok * 5、密码在可见于不可见两种状态之间切换 *
loading
03-19
装货
20个loading动画源文件_AE素材下载.zip
12-28
20个loading动画源文件.AE素材下载 AE、ae源文件、动画源文件
6款Loading加载动画Flash源文件
11-21
6款Loading加载动画Flash源文件
webLoading
03-19
webLoading
纯CSS3实现8款超好看的Loading加载动画特效
02-19
纯CSS3实现8款Loading加载动画特效，可以比拟gif动画效果的8个创新绿色Loading加载特效，动画效果非常漂亮。 这是一款非常不错的导航菜单，鼠标悬停导航上面文章内容遮罩变暗，鼠标离开文章高亮显示。
30个 CSS Javascript 加载器动画效果练习案例
web前端开发
10-25 1280
编辑整理 | 杨小爱在之前的文章中，我也跟大家分享过很多关于加载动画的案例，今天我将再向您分享一些 Loader CSS、Javascript 示例，这些示例均来源于Codepen网站上，...
网页中的loading代码
Mobidogs Blog
06-10 1458
#loader_container {text-align:center;position:absolute;top:40%;width:100%;left: 0;}#loader {font-family:Tahoma, Helvetica, sans;font-size:11.5px;color:#000000;background-color:#FFFFFF;padding:10px 0
各种极致的loading源码
06-11
非常好玩的页面载入界面，一共4款，非常值得学习！
10款超级实用的flash片头loading源文件
10-25
10款超级实用的flash片头loading源文件，压缩包内含有10款的swf文件和fla文件，供大家学习
element ui loading组件源码是怎样的
最新发布
07-14
Element UI 的 loading 组件源码如下所示： ```html <template> <div class="el-loading-mask" v-if="visible" :style="maskStyle"> <div class="el-loading-spinner" :style="spinnerStyle"> <svg viewBox="25 25 50 50" class="circular"> <circle cx="50" cy="50" r="20" fill="none" class="path"></circle> </svg> <p v-if="text" class="el-loading-text">{{ text }}</p> </div> </div> </template> <script> export default { name: 'ElLoading', props: { visible: { type: Boolean, default: false }, text: String, fullscreen: Boolean, spinner: { type: String, default: 'el-icon-loading' }, background: { type: String, default: 'rgba(255, 255, 255, 0.7)' } }, computed: { maskStyle() { return { backgroundColor: this.background }; }, spinnerStyle() { return { fontSize: this.fullscreen ? '80px' : '40px' }; } } }; </script> <style scoped> .el-loading-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } .el-loading-spinner { display: flex; align-items: center; justify-content: center; flex-direction: column; } .circular { animation: rotate .8s infinite linear; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .el-loading-text { margin-top: 10px; font-size: 14px; } </style> ``` 以上是简化过的代码，包含了 loading 组件的模板、脚本和样式部分。 在模板中，使用了 `v-if` 指令判断 `visible` 属性是否为 true，控制 loading 遮罩层的显示与隐藏。loading 遮罩层内部包含了一个 loading 动画的 SVG 图标和一个文本提示。 在脚本部分，定义了组件的名称为 `ElLoading`，并接收了一些属性，如 `visible` 控制 loading 的显示与隐藏、`text` 设置文本提示、`fullscreen` 是否全屏显示、`spinner` 设置 loading 动画图标、`background` 设置遮罩层背景色。还使用了计算属性来动态设置遮罩层和 loading 动画的样式。 在样式部分，设置了 loading 遮罩层的样式，并定义了 loading 动画的旋转效果以及文本提示的样式。 以上就是 Element UI loading 组件的简化源码。希望对您有所帮助！如有任何疑问，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值