进度显示

    /*spin为承载进度条的块*/
    <div id="spin"></div>
    <script src="spin.js"></script>

    var opts = {
      	lines: 12             // The number of lines to draw
    	, length: 7             // The length of each line
    	, width: 5              // The line thickness
    	, radius: 10            // The radius of the inner circle
    	, scale: 1.0            // Scales overall size of the spinner
    	, corners: 1            // Roundness (0..1)
    	, color: '#000'         // #rgb or #rrggbb
    	, opacity: 1/4          // Opacity of the lines
    	, rotate: 0             // Rotation offset
    	, direction: 1          // 1: clockwise, -1: counterclockwise
    	, speed: 1              // Rounds per second
    	, trail: 100            // Afterglow percentage
    	, fps: 20               // Frames per second when using setTimeout()
    	, zIndex: 2e9           // Use a high z-index by default
    	, className: 'spinner'  // CSS class to assign to the element
    	, top: '50%'            // center vertically
    	, left: '50%'           // center horizontally
    	, shadow: false         // Whether to render a shadow
    	, hwaccel: false        // Whether to use hardware acceleration (might be buggy)
    	, position: 'absolute'  // Element positioning
    }

 var target = document.getElementById('spin');
 //定义opts参数下的样式
 var spinner = new Spinner(opts);
 //启动target
 spinner.spin(target);

spinner.stop(target);

spinner.spin(target);

/*承载进度条的块*/
<div id="p1"></div>
/*在上面目录下自动创建的内容,105是图片的大小*/
<div class="jCProgress" style="opacity: 1;">
	<div class="percent">50</div>
	<canvas width="105" height="105"></canvas>
</div>

$(document).ready(function() {
		//变量承载
        var myplugin;
        //设置延迟,因为图片加载慢的问题
        setTimeout(function() {
            if (!myplugin) {
            	//**option设置**
                opt = {
                    percent: 0, // starting position
                    img1: 'http://p.ar2oor.pl/cprogress/c1.png', // background
                    img2: 'http://p.ar2oor.pl/cprogress/c3.png', // foreground
                    speed: 10, // speed (timeout)
                    PIStep: 0.05, // every step foreground area is bigger about this val
                    //limit: 20, // end value
                    loop: false, //if true, no matter if limit is set, progressbar will be running
                    showPercent: true, //show hide percent
                    onInit: function() {
                        console.log('onInit');
                    },
                    onProgress: function(p) {
                    //用于提示进度在0-100之间的信息展示
                        console.log('onProgress', p);
                    }, //p=current percent
                    onComplete: function(p) {
                    //如果进度完成
                        console.log('onComplete', p);
                    }
                };
                //手动更改当前的终点值
                opt.limit = 40;
                //在p1内添加元素,传入参数opt
                myplugin = $('#p1').cprogress(opt);

                //更改值后自动动画,可用于组件加载时调用
                //设置myplugin中的属性
                myplugin.options({
                    limit: 50
                });


            }
        }, 1000);
    });

// 创建参数
options = {
 	img1: 'v1.png',
 	img2: 'v2.png',
 	speed: 50,
 	limit: 70,
};
//创建cprogress
myplugin = $('#p1').cprogress(options);

//通过事件创建cprogress
$('#create').click(function(){
    if(!myplugin){
  	myplugin = $('#p1').cprogress(options);
 	}
});

// 销毁
$('#destroy').click(function(){
 	if(myplugin){
  	myplugin=myplugin.destroy();
 	}
});

// 开始
$('#play').click(function(){
 	if(myplugin){
  	myplugin.start();
 	}
});

// 停止
$('#pause').click(function(){
 	if(myplugin){
  	myplugin.stop();
 	}
});

// 重置,从头开始再走一遍
$('#reset').click(function(){
 	if(myplugin){
  	myplugin.reset();
 	}
});

// 更改配置 (可以更改所有的配置)
$('#speed10').click(function(){
 	if(myplugin){
 	//这里更改的是速度
  	myplugin.options({speed: 10});
 	}
});

.jCProgress > div.percent {
 	font: 18px/27px 'BebasRegular', Arial, sans-serif;
 	color:#ebebeb;
 	text-shadow: 1px 1px 1px #1f1f1f;

 	position:absolute;
 	margin-top:40px;
 	margin-left:22px;
 	text-align: center;
 	width:60px;
}