spin.js实现加载loading

1.源码


<html>
    <head>
        <title>Test Spin Demotitle>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js">script>
        <script type="text/javascript" src="spin.min.js" >script>
      
        <script type="text/javascript">        
            //opts 样式可从网站在线制作
            var opts = {            
                lines: 13, // 花瓣数目
                length: 20, // 花瓣长度
                width: 10, // 花瓣宽度
                radius: 30, // 花瓣距中心半径
                corners: 1, // 花瓣圆滑度 (0-1)
                rotate: 0, // 花瓣旋转角度
                direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
                color: '#000', // 花瓣颜色
                speed: 1, // 花瓣旋转速度
                trail: 60, // 花瓣旋转时的拖影(百分比)
                shadow: false, // 花瓣是否显示阴影
                hwaccel: false, //spinner 是否启用硬件加速及高速旋转            
                className: 'spinner', // spinner css 样式名称
                zIndex: 2e9, // spinner的z轴 (默认是2000000000)
                top: '25%', // spinner 相对父容器Top定位 单位 px
                left: '50%'// spinner 相对父容器Left定位 单位 px
            };
 
            var spinner = new Spinner(opts);
 
            $(document).ready(function () {
                $("#btnRequest").bind("click", function () {
                    Request();
                });
                $("#btnRequest2").bind("click", function () {
                   Request2();
                });
            })
            
            function Request(){
                //请求时spinner出现
                var target = $("#firstDiv").get(0);
                spinner.spin(target);
            }
            
            function Request2(){
                //关闭spinner  
                spinner.spin();
            }
        script>
    head>
    <body>
        <div id="Div">
            <div id="firstDiv">
            div>
            <div id="secondDiv">
                <input id="btnRequest" type="button" value="ON" class="btnStyle" />
                <input id="btnRequest2" type="button" value="OFF" class="btnStyle" />
            div>
        div>
    body>
html>

spin.js实现加载loading_第1张图片

2.spin.min.js下载

http://spin.js.org/
http://spin.js.org/spin.js

你可能感兴趣的:(JavaScript)