以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动画,那将是一件非常痛快的事情。

1、HTML5 Canvas发光Loading动画

之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果,HTML5非常强大。

在线演示

源码下载

2、HTML5/CSS3粒子效果进度条

今天我再来分享一款很有特色的HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来,是一款别具特色的HTML5进度条插件。

在线演示

源码下载

源码下载

这是一款基于HTML5/CSS3和SVG的Loading加载动画特效,一共有4种不同的动画效果。每一组Loading动画都非常可爱,他们都非常欢快的转圈,同时又有颜色渐变的动画效果。

在线演示

源码下载

4、四组欢乐的CSS3 Loading加载动画

今天我们又要再分享4组欢乐的CSS3 Loading加载动画,这4款动画是同一种模式,都是一群小球在大球里面形成各种排列从而达到Loading加载动画的效果。

在线演示

源码下载

5、jQuery自定义Loading动画插件spin.js

spin.js是一款基于jQuery的Loading动画插件,和之前分享的CSS3 Loading动画应用不同的是,这款Loading动画是基于jQuery的,意味着兼容性更好;还有就是这款Loading动画是可以自定义参数的,比如半径、旋转速度等都可以通过右侧的滑杆来设置。

在线演示

源码下载

6、CSS3 3D立方体Loading加载动画特效

之前我们分享过一些HTML5和CSS3的3D立方体特效,他们都是可以旋转来展示3D立体的效果。这次分享的这款CSS3 3D立方体确是用来做Loading加载动画的,9个小立方体上下浮动,呈现波浪的效果,并且,这个Loading动画还利用了CSS3的阴影属性让这些立方体更充满3D色彩。

在线演示

源码下载

7、CSS3 Loading进度条加载动画特效 3款绚丽风格

今天我要分享一款更加炫酷的CSS3进度条加载动画特效,该动画特效有3个不同的风格,注意,IE6,7,8是不支持该进度条动画的。

在线演示

源码下载

本文固定链接: http://www.i7758.com/archives/1234.html

转自【http://www.cnblogs.com/i7758/p/4560085.html】

更多精彩动画可查看【http://www.cnblogs.com/i7758/p/4560085.html】或者【http://www.i7758.com/】

精美的HTML5 Loadding页面的更多相关文章

  1. 浅谈HTML5单页面架构(一)——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  2. 浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  3. 玩转HTML5移动页面

    (1) 动画雪碧图涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)!网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动化构建工具Grunt和Gul ...

  4. 玩转HTML5移动页面(动效篇)(转载)

    本文转载自: 玩转HTML5移动页面(动效篇)

  5. 玩转HTML5移动页面(优化篇)

    原文:http://www.grycheng.com/?p=472 承接上文<玩转HTML5移动页面(动效篇)>,上次说的是让页面动起来的一些小技巧.而页面动起来的根基是功能可用的页面,因 ...

  6. 玩转HTML5移动页面(动效篇)

    原文:http://www.grycheng.com/?p=458 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有 ...

  7. HTML5网站大观:15个精美的 HTML5 单页网站作品欣赏

    HTML5 是现在Web开发领域的热点,更多的开发人员开始使用HTML5来开发交互性强.效果出众的Web应用和游戏.今天,本文收集了15个精美的 HTML5 单页网站作品,让大家感受一下 HTML5 ...

  8. 使用 video.js 开发 HTML5 视频页面

    时间 2015-05-13 17:11:58 The GIS Guy 原文  http://thegisguy.tk/html5-video-using-video-js/ 主题 Video.js H ...

  9. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

随机推荐

  1. 迭代输出Map和List<Map<String,Object>>的方法

    一.Map<String,Object> String:key的类型 Object:value的类型,value可能是String,或者int类型,什么类型都可以 对于Map接口来说,本身 ...

  2. C#解析复杂的Json成Dictionary<key,value>并保存到数据库(多方法解析Json 四)

    准备工作: 1.添加引用System.Web.Extensions, 2..net3.5+版本都有,如果VS2010找不到,在这个文件夹找:C:\Program Files\Reference Ass ...

  3. 谷歌 不支持 activeX插件

    因为Chrome浏览器42以上版本已经陆续不再支持NPAPI插件,也就是说,目前的迅雷插件.FLASH插件.支付宝插件.阿里旺旺插件.百度贴吧.网银等网站都受到一定程度的影响,本文分享给大家如何让谷歌 ...

  4. Chart For Asp.Net ----Overview

    一个图表有很多元素构成,所有元素都能通过图表API控制.图表API是面向对象的,可扩展的,高复用的.支持很多图表元素如:data series,data points in a series,char ...

  5. BCP批量导入数据时候如何处理表中自动增加的字段

    大容量导入数据时保留标识值 (SQL Server) http://msdn.microsoft.com/zh-cn/library/ms186335(v=sql.120).aspx 使用格式化文件跳 ...

  6. POJ 1739

    楼教主男人八题之一... 题目大意: 求从左下角经过所有非障碍点一次到达右下角的方案数 这里不是求回路,但是我们可以考虑,在最下面一行再增加一行,那么就可以当做求此时左下角到右下角的回路总数,那么就转 ...

  7. Google search

    filetype: active directory filetype: eg : lady gaga filetype:mp3 link: eg : link : supinfo.com(链接到su ...

  8. AS3事件流机制

    事件流: 显示对象,深度 MouseEnabled,MouseChildren:显示对象,同层次(父容器为同一对象)遮挡问题

  9. 在Android Studio中使用BaiduMap SDK实时获取当地位置信息

    配置BaiduMap 环境 1.在百度API中新建自己的一个APP包名和APP名需要注意和自己Android Studio 中的包名和APP名保持一致: 2.百度地图中还需要填写一个SHA1 数字签名 ...

  10. cvWaitKey

    OpenCV中的一个函数 函数原型为: C++: int waitKey(int delay=0) Python: cv2.waitKey([delay]) → retval C: int cvWai ...