spin.js插件的转圈加载效果

先上插件链接地址：http://fgnass.github.io/spin.js/

以下是使用spin.js插件的完整版测试例子：

<!doctype html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>test_storage</title>

<script type="text/javascript" src="spin.min.js"></script>

<script type="text/javascript">

window.onload = function(){

    var opts = {

  lines: 13, // The number of lines to draw |小长条的数量

  length: 13, // The length of each line |小长条的长度

  width: 3, // The line thickness |小长条的宽度

  radius: 15, // The radius of the inner circle |内环的半径长

  corners: 1, // Corner roundness (0..1)

  rotate: 0, // The rotation offset |旋转角度

  direction: 1, // 1: clockwise, -1: counterclockwise |1：顺时针方向 -1：逆时针方向

  color: '#000', // #rgb or #rrggbb or array of colors |颜色

  speed: 1, // Rounds per second |每秒转多少圈

  trail: 60, // Afterglow percentage |余晖效果百分比

  shadow: false, // Whether to render a shadow |渲染阴影

  hwaccel: false, // Whether to use hardware acceleration |加速

  className: 'spinner', // The CSS class to assign to the spinner |类名spinner

  zIndex: 2e9, // The z-index (defaults to 2000000000) |显示在最顶层

  top: 'auto', // Top position relative to parent in px |相对父元素的top

  left: 'auto' // Left position relative to parent in px |相对父元素的left ，默认情况spinner是显示于父元素居中位置

};

var target = document.getElementById('foo');

var spinner = new Spinner(opts).spin(target);//给id为foo的div 中绑上spinner

//或者使用spinner.el属性插入DOM /* 如下 */

/*var spinner = new Spinner().spin();

target.appendChild(spinner.el);*/

//spinner.stop();//用来移除spinner，停止动画

} </script> </head> <body> <div id="foo" style="height:100px;"></div> </body> </html>

结果图如下所示：

巴特西

spin.js插件的转圈加载效果

最新文章

热门文章