以前我们大部分的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. <input type="hidden" id="haha" name="wang" value="xiaodong" />

    jsp中一个隐藏的文本框,文本框里的值是:xiaodong id属性和name属性:就是在JavaScript中或者控制器中根据id或name属性取它的value的值 开发人员所需要,又不想让用户看到 ...

  2. visualSVN server库迁移

    首先,VisualSVN Server Manager,包含两个路径,一个是安装路径,例如本机:C:\Program Files\VisualSVN Server,一个是库路径,例如本机:C:\Rep ...

  3. wp8.1 Study8:页面过渡和主题动画(Page transition and Theme animations)

    一.在WP8.1中是有动画(Animation)的: 页面导航(默认为旋转式Turnstile).PointerDown/up(默认是倾斜).页面旋转.MenuFlyout出现等等 二.页面过渡(Pa ...

  4. MonoRail MVC应用(2)-构建多层结构的应用程序

    习惯了分层结构的.NET开发了,当然也是分层有优势,所以在使用MonoRail进行网站构建时,首先考虑到的问题就是MonoRail如何应对分层的结构.问题1:MonoRail在WEB层没有根目录,必须 ...

  5. Spring学习笔记之Constructor-based or setter-based DI?

    如果是强制依赖,那么使用构造器注入,如果是可选依赖,那么使用set方法注入.Spring鼓励构造器注入,可以确保依赖项不为null, Since you can mix constructor-bas ...

  6. Android Support ;v4、v7、v13的区别

    google提供了Android Support Library package系列的包来保证来高版本sdk开发的向下兼容性,即我们用4.x开发时,在1.6等版本上,可以使用高版本的有些特性,如fra ...

  7. [Windows驱动]流媒体驱动开发

    从Windows98开始,Windows流媒体驱动遵循Windows Driver Model(WDM)模型并使用Kernel Streaming(KS)组件.Kernel Streaming(KS) ...

  8. python3使用requests发闪存

    闪存ing.cnblogs.com是博客园类似推特.饭否的服务, 我写了以下程序可以完成发闪存的操作,目的是顺便练习使用requests库. requests是一个python 轻量的http客户端库 ...

  9. 破解Xamarin

    试用了一阵子Mono For Android,今天到期了,,囊中羞涩,只好破解. 说是要在vs2013的英文界面下运行破解包,不知道是真是假,下载并安装了一个. 然后又下载了破解包.是个名为xa.ra ...

  10. 毕向东day01笔记--dos-jdk-jre-环境变量等

    1.常用的dos命令,md,rd,dir,c:(进入C盘),del,set classpath 2.JDK和JRE之间的区别: JDK包含JER,JRE包含JVM. 3.环境变量的配置,静态配置--b ...