element.ElasticProgress({
buttonSize: 60,
fontFamily: "Montserrat",
colorBg: "#adeca8",
colorFg: "#7cc576",
onClick: function(event) {
console.log("onClick");
$(this).ElasticProgress("open");
},
onOpen: function(event) {
fakeLoading($(this));
},
onFail: function(event) {
$(this).ElasticProgress("open");
},
onCancel: function(event) {
$(this).ElasticProgress("open");
}
});
					


element.ElasticProgress({
align: "center",
fontFamily: "Roboto",
colorFg: "#77c2ff",
colorBg: "#4e80dd",
bleedTop: 110,
bleedBottom: 40,
buttonSize: 100,
labelTilt: 70,
arrowDirection: "up",
onClick: function() {
	$(this).ElasticProgress("open");
},
onOpen: function() {
	fakeLoading($(this))
},
onCancel: function() {
	$(this).ElasticProgress("close");
},
onComplete: function() {
	var $obj = $(this)
	$obj.ElasticProgress("close");
}
});
					


element.ElasticProgress({
align: "center",
colorFg: "#686e85",
colorBg: "#b4bad2",
highlightColor: "#ffab91",
width: Math.min($(window).width()/2 - 100, 600),
barHeight: 10,
labelHeight: 50,
labelWobbliness: 0,
bleedTop: 120,
bleedRight: 100,
buttonSize: 60,
fontFamily: "Arvo",
barStretch: 0,
barInset: 4,
barElasticOvershoot: 1,
barElasticPeriod: 0.6,
textFail: "Download Failed",
textComplete: "Download Complete",
arrowHangOnFail: false,
onClick: function() {
		$(this).ElasticProgress("open");
},
onOpen: function() {
		fakeLoading($(this))
},
onComplete: function() {
		var $obj = $(this)

		TweenMax.delayedCall(1.5, function() {
				$obj.ElasticProgress("close");
		})
}
});
					

var e = new ElasticProgress(document.querySelectorAll('.Download')[3], {
colorFg: "#ed7499",
colorBg: "#635c73",
highlightColor: "#ed7499",
barHeight: 14,
barInset: 10,
fontFamily: "Indie Flower"
});
e.onClick(function() {
e.open();
})
e.onOpen(function() {
fakeLoading(e, 2, 0.5);
});
e.onFail(function() {
e.close();
})
					

适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

来源:懒人素材