浙江 杭州

11种炫酷的纯CSS3 Loading指示器动画特效

系统分类: 网页特效 - css3 - css3 动画 2017-05-25

人气2208

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


SpinKit是一组效果非常酷的纯CSS3 Loading指示器动画特效。这组loading指示器共有11种不同的效果。它通过硬件加速来制作平滑的CSS3动画过渡效果。通过它你可以制作出非常炫酷的页面loading效果。

安装

可以通过bower或nmp来安装该loading指示器:

$ bower install spinkit
$ npm install spinkit                
              

使用方法

使用SCSS文件

如果你使用SCSS文件,可以只引入需要的loading指示器,而不需要全部引入:

@import '../bower_components/spinkit/scss/spinners/1-rotating-plane',
        '../bower_components/spinkit/scss/spinners/3-wave';                
              

要支持所有的浏览器,你需要使用一个autoprefixer文件。如果你使用gulp来编译SCSS,可以使用gulp-autoprefixer,如果你使用grunt来编译,可以使用grunt-autoprefixer

使用的变量可以在scss/_variables.scss文件中进行修改。

浏览器兼容

所有的最新版本的现代浏览器都支持CSS3动画,支持CSS animation的浏览器占使用量的90%。如果你需要支持IE9级以下的浏览器,可以使用下面的方法。

loading指示器回退方法

最简单的回退方法是通过Modernizr来检测浏览器是否支持animation属性,如果不支持的话可以将loading指示器更换为一张GIF图片。你也可以像下面这样来定义一个函数来手动检测:

function browserSupportsCSSProperty(propertyName) {
  var elm = document.createElement('div');
  propertyName = propertyName.toLowerCase();

  if (elm.style[propertyName] != undefined)
    return true;

  var propertyNameCapital = propertyName.charAt(0).toUpperCase() + propertyName.substr(1),
    domPrefixes = 'Webkit Moz ms O'.split(' ');

  for (var i = 0; i < domPrefixes.length; i++) {
    if (elm.style[domPrefixes[i] + propertyNameCapital] != undefined)
      return true;
  }

  return false;
}                
              

然后使用它来检测浏览器是否支持animation属性:

if (!browserSupportsCSSProperty('animation')) {
  // 回退方法...
}                
              

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:71.02KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2173.html 非特殊说明,本文版权归原作者所有,转载请注明出处
11种炫酷的纯CSS3 Loading指示器动画特效

我当前G币余额:0 已下载次数:0

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

说点什么...(已有0 评论)