资源分享:炫酷的css3动画加载框架Loaders

boyanx6个月前技术教程18

页面加载动画在web应用中必不可少,加载动画效果也各有千秋。在web页面ajax请求,单页面应用页面切换时好的加载动画会让浏览者赏心悦目忘记加载的耗费时间,一个性能好的页面,必须有loading预加载功能。以前在PC端大多使用动态图来完成加载动画,移动端也是如此,现在css3在移动端支持优秀,pc端也日趋完善,不妨试用CSS3实现Loading加载动画,虽然IE低版本还不支持CSS3。

今天就介绍一款优秀,效果良好的css动画加载框架Loaders.css

类型还是很多的效果也非常的不错,有喜欢的可以加入到自己网站。

使用方法也很简单:

  1. 引入loaders.min.css

  2. 创建元素然后增加动画class(例如<div class="loader-inner ball-pulse"></div>)

  3. 在div中插入适量的元素

另一种使用方式

  1. 引入loaders.min.css,Jquery,loaders.css.js

  2. 创建元素然后增加动画class(例如<div class="loader-inner ball-pulse"></div>)

  3. loaders.js 是帮助你正确插入动画所需数量div的js

  4. 选择一个div然后初始化动画(例如:$('.loader-inner').loaders())

项目地址:
https://github.com/ConnorAtherton/loaders.css

相关文章推荐:资源分享:异常强大的预设css3动画库Animate

有些插件需要翻墙,可以给大家推荐一个chrome的插件云帆起航

标签: jquery loading

相关文章

基于 layui、xlsx.js 封装的 excel 导出小插件

简介在工作中发现突然对excel导出有点小需求,所以开发了这款小插件。此工具兼容IE10,firfox等主流浏览器。文件读取基于H5的FileReader,导出excel基于XLSX.js(此项目已开...

使用vanilla-lazyload实现懒加载

使用vanilla-lazyload实现懒加载给主题配置一个全新的lazyload库,来自verlok的vanilla-lazyload开源js库,支持更多的特性和特效。vanilla-lazyloa...

性能出色,纯CSS实现的loading动画——Loaders.css

介绍loaders.css是Github上一个使用纯粹的css实现的开源loading动画库,完全用CSS编写的加载动画的集合。每个动画仅限于CSS属性的一小部分,以避免复杂的绘画和布局计算。下面这张...

Jquery加载本地文件出现跨域错误的解决方案

禁止跨域是浏览器的安全限制机制,会报告上述错误。但是可以通过设置来绕过这个限制(如果经常调试前端代码,可以在本机装个web容器)。常见的方式:右击chrome快捷方式,选择“属性”,在“快捷方式”下的...

伟景行 citymaker 从入门到精通(1)——js开发,最基本demo,加载cep工程文件

开发环境:citymaker 7(以下简称cm),jquery,easyui 1.4(界面),visual studio 2012(没有vs,部署到IIS也行,html在本地目录双击打开可用)以下演示...

前端面试:异步加载和延迟加载的理解?

回答:异步加载和延迟加载是前端优化网站性能的两种方法。异步加载的方案: 动态插入script标签通过ajax去获取js代码,然后通过eval执行script标签上添加defer或者async属性创建并...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。