以前我们大部分的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. POJ 2886 Who Gets the Most Candies?

    思路: 对于 k 位置的 孩子,他的 数字是 +num 那么因为他自己本身是要被踢走的,所以相对位置 为k= k+num-1 如果数字是 -num,那么按正着数就没影响,k=k-num.线段树存储当前 ...

  2. 使用ASP.Net WebAPI构建REST服务(二)——路由

    REST并没有像传统的RPC服务那样显式指定了服务器函数的访问路径,而是将URL根据一定的规则映射为服务函数入口,这个规则就称之为路由.Asp.Net WebAPI的路由方式和Asp.Net MVC是 ...

  3. 面试题目-findmax的实现

    #include <vector> #include <iostream> #include "printCollection.h" using names ...

  4. C# Process打开程序并移动窗口到指定位置

    process.start只是按指定的参数来运行一个程序,而这个程序自己运行起来是什么样子的就不是Process所能处理的了,不过当程序运行起来后倒是可以通过Process的MainWindowHan ...

  5. 戴文的Linux内核专题:04安全

    转自Linux中国 Linux内核是所有Linux系统的核心.如果有任何恶意代码控制或破害了内核的任何一部分,那么系统会严重受损,文件可能被删除或损坏,私人信息可能被盗等等.很明显,保持内核安全涉及到 ...

  6. nginx初识

  7. RPI学习--环境搭建_默认启动桌面/终端修改

    参见:http://elinux.org/RPi_raspi-config 首次运行Raspbian会自动进入设置,往后也可以重新进入设置: $ sudo raspi-config 选项3 Enabl ...

  8. jQuery 1.7_20120209 学习笔记

    html([val|fn]) parameters: function(index,html) 此函数返回一个html字符串,接受两个参数,index为元素在集合中的索引位置,html为原先的html ...

  9. office2013不能正常使用

    感觉非常卡一样 还不能显示内容 工具栏也点不动   这个应该是Office硬件图形加速惹得祸,解决办法: 文件>选项>高级>显示,找到“禁用硬件图形加速”在前面打勾,关闭再打开就OK ...

  10. VS2013开发Android App 环境搭建

    下载并安装vs2013,(安装时发现多了with blend,百度后有人说是设计师用版本,这是不对的,害我花费不少时间查找程序员用版本).我安装的是Microsoft Visual Studio Ul ...