以前我们大部分的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. cmd命令行中的errorlevel和延迟赋值

    最近用到了命令行,一点心得: 1.errorlevel返回的确实是上一条命令的返回值,但不同命令的表现完全不同.比如: dir echo %errorlevel% //显示0 dir aldkalf ...

  2. Android 移动缩放的ImageView

    今天介绍一下Android中怎么实现ImageView的缩放和移动,自定义TouchImageView. public class TouchImageView extends ImageView { ...

  3. matlab代码 图像处理源码

    非常不错的找图像处理源码的地方,源码搜搜. http://www.codesoso.com/Category.aspx?CategoryId=56

  4. URL详谈

    URL(Uniform Resource Locator,统一资源定位符)是地址的别名.它包含关于文件存储位置和浏览器应如何处理它的信息.互联网上的每个文件都有唯一的 URL. URL 的第一个部分称 ...

  5. litepal的jar包

    转自http://blog.csdn.net/luohai859/article/details/39292607 LitePal是一款开源的Android数据库框架,它采用了对象关系映射(ORM)的 ...

  6. 《Java程序性能优化:让你的Java程序更快、更稳定》

    Java程序性能优化:让你的Java程序更快.更稳定, 卓越网更便宜,不错的书吧

  7. KeySweeper 微软无线键盘嗅探装置

    Author:Samy Kamkar From: http://samy.pl/keysweeper/ 中文字幕由Galaxy无名提供 PS:视频传到youku之后发现50秒左右的字幕被干掉了,不知道 ...

  8. 过期邮件替换SQL

  9. BZOJ 1816 扑克牌

    WA的我怀疑人生.. 发现原来是循环中间就要break掉,不然爆int. 总感觉这题可以直接构造啊.. #include<iostream> #include<cstdio> ...

  10. linux命令:touch

    1:命令介绍: touch用来创建文件或修改文件和目录的时间戳,包括存取时间和更改时间. 2:命令格式: touch [选项] 文件 3:命令参数: -a   或--time=atime或--time ...