zoukankan      html  css  js  c++  java
  • Spin.js-CSS动画进度载入器

    spin.js是一款很easy的CSS载入器,他是一款使用了VML(Vector Makeup Language)的CSS动画效果。

    spin.js的特性

    他有着很强大的适应性。有着下面几个特性:

    1.    没有额外的图片。也没有添加的外部CSS文件

    2.    不须要依赖于其它工具,对于jQuery而言,它支持jQuery,可是jQuery并不是必须的

    3.    有非常高的可配置性

    4.    与分辨率无关

    5.    浏览器兼容性非常好,在低版本号的IE上。採用VML支持

    6.    使用了@keyframe动画。在不支持@keyframe的浏览器上,使用setTimeout()

    7.    支持全部的主流浏览器。包含IE6

    spin.js的使用

    spin.js动态创建进度条。而且是圆圈进度动画,它的高配置表如今能够配置颜色。放射线的宽度和长度,旋转是逆时针还是顺时针,还有旋转的速度。你能够设置一个数组,来存储这个进度条的属性:

    1.    var opts={

    2.    lines:11, // 圆圈中线条的数量

    3.    length: 29, // 每条线的长度

    4.     10, //每条线的宽度

    5.    radius: 30, //每条线的圆角半径

    6.    corners: 1, //角落圆度,从0到1

    7.    rotate: 0, //旋转偏移量

    8.    direction: 1, //旋转方向,当中1表示顺时针。0表示逆时针

    9.    color: '#FFF', // 颜色

    10.  speed: 1, //旋转速率,单位为转速/

    11.  trail: 60, //余晖的百分比,即颜色变化的百分比

    12.  shadow: false, //是否显示阴影

    13.  hwaccel: false, //是否使用硬件加速

    14.  className: 'spinner', // 绑定到spinner上的class名称

    15.  zIndex: 2e9, //定位层,默认值是2000000000

    16.  top: 'auto', // 相对父元素的向上定位,单位是px

    17.  left: 'auto' // 相对父元素的向左定位,单位是px

    18.  };

    然后结合jQuery使用spin.js很easy,仅仅须要在选定的元素上,使用spin()方法就能够了。将上面设定的设置作为參数传入:

    1.    $("#loading").spin(opts);

    停止载入动画效果也很easy。仅仅须要将false作为參数传入spin方法就能够:

    1.    $("#loading").spin(false);

    而针对jQuery,spin.js还提供了更为简单的设置,能够传入tiny,small,large来简单设置圆圈的大小,其默认的设置中,圆圈的线条是9根。每条线的长度是10px。宽20px。对于tiny。small。large的设置例如以下:

    ·       tiny: {lines: 8, length: 2, 2, radius: 3 }

    ·       small: {lines: 8, length: 4, 3, radius: 5 }

    ·       large: {lines: 10, length: 8, 4, radius: 8 } 

    spin.js的浏览器支持

    spin.js支持全部的主流浏览器,当中包含:

    ·       Chrome

    ·       Safari3.2+

    ·       Firefox3.5+

    ·       IE6,7,8,9

    ·       Opera10.6+

    ·       MobileSafari (iOS 3.1+)

    ·       Android2.3+

    spin.js的演示

    在本文中的演示样例,大家在演示中能够看到旋转的进度条,而当你点击在进度条上面的时候。代码通过传入false參数。将进度条停止并隐藏。

    其它演示和库文件下载,请參见IT在线教育平台——麦子学院

    不论什么问题,能够联系我~

  • 相关阅读:
    【HTML】使用css3和html给网站添加上春节灯笼特效
    【CSS】学习笔记2 字体设置
    【CSS】学习笔记3 段落设置
    【CSS】学习笔记1 使用CSS样式表
    正则
    图片懒加载
    uni-app-组件
    uni-app-condition(条件)启动模式
    uni-app-页面
    uni-app项目目录和开发规范
  • 原文地址:https://www.cnblogs.com/mfmdaoyou/p/6782905.html
Copyright © 2011-2022 走看看