html5弹性按钮,html5 TweenMax.js弹性按钮加载进度条动画特效

特效描述：弹性按钮 加载进度条 加载动画特效。html5弹性动画特效，TweenMax.js，加载动画，按钮动画特效

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

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();

})