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

boyanx1个月前技术教程6

页面加载动画在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

相关文章

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

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

小技巧,如何使用 webpack 降低前端资源文件维护成本

前言前端现在开发某个常见功能,直接会在 npm 找到合适的包,这些包存在于 node_modules 目录下。如何减少包体积,用下 CDN 加速,或者这个模块只有 script 标签导入方式时,直接从...

webpack 的使用教程

今天接触webpack,就着官网上的教程一步一步的玩,把自己的理解总结以便和大家交流 webpack的主要特点1. 可以把js,css,image,甚至文本当成模块来处理,并通过require的方法来...

视差滚动不适合网页的5个原因

@OpzoonUED 翻译,原文出自于smashinghub.com。列举缺点之前,首先我们要看看什么是视差滚动。视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近...

使用vanilla-lazyload实现懒加载

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

加载后执行RunAfterImgLoaded.js

RunAfterImgLoaded.js故名思议是一款在图片加载完之后执行的一个js插件,但是这个还只是一个设想,有时间会再将它做出来。关于图片加载完之后执行的问题引申出一些新的发现。在最近一个切图项...

发表评论    

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