circular-progress-with-bg-image v1.0.0

jQuery-plugin-progressbar

This is a fork of yxfanxiao's jQuery-plugin-progressbar to add support for background image.

a simple jQuery plugin --- dynamic loading progress bar

screenshot

how to use

firstly, you need to download jQuery-plugin-progressbar.js & jQuery-plugin-progressbar.css

####demo

<div class="progress-bar"></div>
<div class="progress-bar" data-percent="60" data-duration="1000" data-color="#ccc,yellow"></div>
<div class="progress-bar" data-percent="20" data-color="#a456b1,#12b321"></div>
<input type="submit" value="加载">
<script>
	$(".progress-bar").loading();				// you can load automatically
	$('input').on('click', function () {		// use some events to control the loading like this 
		 $(".progress-bar").loading();
	});
</script>

• when use you can change 4 parameters: data-percent (百分比数) data-duration (转圈的时长) data-color (进度条背景颜色，进度条颜色) data-backgroundImage
• you can change default parameters in css.scss $circle-size: 100px (圆的直径) $background-color: #b3cef6 (进度条背景颜色) $progress-color: #4b86db (进度条颜色) $percent: 75 (百分比数) $duration: 2s (转圈的时长) $backgroundImage: ''

a problem

setTimeout(function () {	
	$rotate.css({
		'transition': 'transform ' + opts.duration + 'ms linear',
		'transform': 'rotate(' + opts.percent * 3.6 + 'deg)'
	});
},1);	

I use setTimeout here, if not, the transiton not work. Why here css executes at a moment?