diff options
author | 2016-09-19 17:32:42 +0800 | |
---|---|---|
committer | 2016-09-19 17:32:42 +0800 | |
commit | 0c4c35f8fd0e68e5f04f88639d6869526075e513 (patch) | |
tree | 5ee64b8e22ed8d103b59bd7555ddc2370eb946ec /openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader | |
parent | d72d6805ae03018254edb6608f9b193915495880 (diff) |
add thirdparty files
Change-Id: Ice7ebee337a78faf506691e80d4a9a83f4eb7f02
Signed-off-by: “shentao” <shentao@chinamobile.com>
Diffstat (limited to 'openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader')
2 files changed, 556 insertions, 0 deletions
diff --git a/openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.css b/openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.css new file mode 100644 index 00000000..46e2a9aa --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.css @@ -0,0 +1,382 @@ +/********************** + *CSS Animations by: + *http://codepen.io/vivinantony +***********************/ +.spinner1 { + width: 40px; + height: 40px; + position: relative; +} + + +.double-bounce1, .double-bounce2 { + width: 100%; + height: 100%; + border-radius: 50%; + background-color: #fff; + opacity: 0.6; + position: absolute; + top: 0; + left: 0; + + -webkit-animation: bounce 2.0s infinite ease-in-out; + animation: bounce 2.0s infinite ease-in-out; +} + +.double-bounce2 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +@-webkit-keyframes bounce { + 0%, 100% { -webkit-transform: scale(0.0) } + 50% { -webkit-transform: scale(1.0) } +} + +@keyframes bounce { + 0%, 100% { + transform: scale(0.0); + -webkit-transform: scale(0.0); + } 50% { + transform: scale(1.0); + -webkit-transform: scale(1.0); + } +} + +.spinner2 { + width: 40px; + height: 40px; + position: relative; +} + + +.container1 > div, .container2 > div, .container3 > div { + width: 6px; + height: 6px; + background-color: #fff; + + border-radius: 100%; + position: absolute; + -webkit-animation: bouncedelay 1.2s infinite ease-in-out; + animation: bouncedelay 1.2s infinite ease-in-out; + /* Prevent first frame from flickering when animation starts */ + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.spinner2 .spinner-container { + position: absolute; + width: 100%; + height: 100%; +} + +.container2 { + -webkit-transform: rotateZ(45deg); + transform: rotateZ(45deg); +} + +.container3 { + -webkit-transform: rotateZ(90deg); + transform: rotateZ(90deg); +} + +.circle1 { top: 0; left: 0; } +.circle2 { top: 0; right: 0; } +.circle3 { right: 0; bottom: 0; } +.circle4 { left: 0; bottom: 0; } + +.container2 .circle1 { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; +} + +.container3 .circle1 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +.container1 .circle2 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} + +.container2 .circle2 { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; +} + +.container3 .circle2 { + -webkit-animation-delay: -0.7s; + animation-delay: -0.7s; +} + +.container1 .circle3 { + -webkit-animation-delay: -0.6s; + animation-delay: -0.6s; +} + +.container2 .circle3 { + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; +} + +.container3 .circle3 { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; +} + +.container1 .circle4 { + -webkit-animation-delay: -0.3s; + animation-delay: -0.3s; +} + +.container2 .circle4 { + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; +} + +.container3 .circle4 { + -webkit-animation-delay: -0.1s; + animation-delay: -0.1s; +} + +@-webkit-keyframes bouncedelay { + 0%, 80%, 100% { -webkit-transform: scale(0.0) } + 40% { -webkit-transform: scale(1.0) } +} + +@keyframes bouncedelay { + 0%, 80%, 100% { + transform: scale(0.0); + -webkit-transform: scale(0.0); + } 40% { + transform: scale(1.0); + -webkit-transform: scale(1.0); + } +} + +.spinner3 { + width: 40px; + height: 40px; + position: relative; + -webkit-animation: rotate 2.0s infinite linear; + animation: rotate 2.0s infinite linear; +} + +.dot1, .dot2 { + width: 60%; + height: 60%; + display: inline-block; + position: absolute; + top: 0; + background-color: #fff; + border-radius: 100%; + + -webkit-animation: bounce 2.0s infinite ease-in-out; + animation: bounce 2.0s infinite ease-in-out; +} + +.dot2 { + top: auto; + bottom: 0px; + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }} +@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} + +@-webkit-keyframes bounce { + 0%, 100% { -webkit-transform: scale(0.0) } + 50% { -webkit-transform: scale(1.0) } +} + +@keyframes bounce { + 0%, 100% { + transform: scale(0.0); + -webkit-transform: scale(0.0); + } 50% { + transform: scale(1.0); + -webkit-transform: scale(1.0); + } +} + +.spinner4 { + width: 30px; + height: 30px; + background-color: #fff; + -webkit-animation: rotateplane 1.2s infinite ease-in-out; + animation: rotateplane 1.2s infinite ease-in-out; +} + +@-webkit-keyframes rotateplane { + 0% { -webkit-transform: perspective(120px) } + 50% { -webkit-transform: perspective(120px) rotateY(180deg) } + 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } +} + +@keyframes rotateplane { + 0% { + transform: perspective(120px) rotateX(0deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) + } 50% { + transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); + -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) + } 100% { + transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); + } +} + +.spinner5 { + width: 32px; + height: 32px; + position: relative; +} + +.cube1, .cube2 { + background-color: #fff; + width: 10px; + height: 10px; + position: absolute; + top: 0; + left: 0; + + -webkit-animation: cubemove 1.8s infinite ease-in-out; + animation: cubemove 1.8s infinite ease-in-out; +} + +.cube2 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} + +@-webkit-keyframes cubemove { + 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } + 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } + 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } + 100% { -webkit-transform: rotate(-360deg) } +} + +@keyframes cubemove { + 25% { + transform: translateX(42px) rotate(-90deg) scale(0.5); + -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); + } 50% { + transform: translateX(42px) translateY(42px) rotate(-179deg); + -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); + } 50.1% { + transform: translateX(42px) translateY(42px) rotate(-180deg); + -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); + } 75% { + transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); + -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); + } 100% { + transform: rotate(-360deg); + -webkit-transform: rotate(-360deg); + } +} + +.spinner6 { + width: 50px; + height: 30px; + text-align: center; +} + +.spinner6 > div { + background-color: #fff; + height: 100%; + width: 6px; + margin-left:2px; + display: inline-block; + + -webkit-animation: stretchdelay 1.2s infinite ease-in-out; + animation: stretchdelay 1.2s infinite ease-in-out; +} + +.spinner6 .rect2 { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; +} + +.spinner6 .rect3 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} + +.spinner6 .rect4 { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} + +.spinner6 .rect5 { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; +} + +@-webkit-keyframes stretchdelay { + 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } + 20% { -webkit-transform: scaleY(1.0) } +} + +@keyframes stretchdelay { + 0%, 40%, 100% { + transform: scaleY(0.4); + -webkit-transform: scaleY(0.4); + } 20% { + transform: scaleY(1.0); + -webkit-transform: scaleY(1.0); + } +} + .spinner7 { + width: 90px; + height: 30px; + text-align: center; + } + + .spinner7 > div { + background-color: #fff; + height: 15px; + width: 15px; + margin-left:3px; + border-radius: 50%; + display: inline-block; + + -webkit-animation: stretchdelay 0.7s infinite ease-in-out; + animation: stretchdelay 0.7s infinite ease-in-out; + } + + .spinner7 .circ2 { + -webkit-animation-delay: -0.6s; + animation-delay: -0.6s; + } + + .spinner7 .circ3 { + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; + } + + .spinner7 .circ4 { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; + } + + .spinner7 .circ5 { + -webkit-animation-delay: -0.3s; + animation-delay: -0.3s; + } + + @-webkit-keyframes stretchdelay { + 0%, 40%, 100% { -webkit-transform: translateY(-10px) } + 20% { -webkit-transform: translateY(-20px) } + } + + @keyframes stretchdelay { + 0%, 40%, 100% { + transform: translateY(-10px); + -webkit-transform: translateY(-10px); + } 20% { + transform: translateY(-20px); + -webkit-transform: translateY(-20px); + } + }
\ No newline at end of file diff --git a/openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.min.js b/openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.min.js new file mode 100644 index 00000000..6d3db707 --- /dev/null +++ b/openo-portal/portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.min.js @@ -0,0 +1,174 @@ +/*-------------------------------------------------------------------- + *JAVASCRIPT "FakeLoader.js" + *Version: 1.1.0 - 2014 + *author: João Pereira + *website: http://www.joaopereira.pt + *Licensed MIT +-----------------------------------------------------------------------*/ +(function ($) { + + $.fn.fakeLoader = function(options) { + //Defaults + $.fn.settings = $.extend({ + timeToHide:0, // Default Time to hide fakeLoader + pos:'fixed',// Default Position + top:'0px', // Default Top value + left:'0px', // Default Left value + width:'100%', // Default width + height:'100%', // Default Height + zIndex: '999', // Default zIndex + bgColor: '#2ecc71', // Default background color + opacity:'0.6',//默认透明度 + text:'',//默认加载中文字 + spinner:'spinner1', // Default Spinner + imagePath:'' // Default Path custom image + }, options); + var timer=null; + $.fn.Setopacity=function(opacity){ + $(".loadingbackground").fadeTo("slow",opacity); + }; + $.fn.SetTimeToHide=function(timetohide){ + var el = $(this); + el.settings.timeToHide=timetohide; + if(!!timer)clearTimeout(timer); + el.css({ + 'display':"block" + });//fadeTo("fast",el.settings.opacity); + $(".loadingbackground").fadeTo(1,el.settings.opacity); + setTimeout(function(){ + el.fadeOut();//fadeTo("slow",0); + }, el.settings.timeToHide); + }; + $.fn.setToHide=function(){ + var el = $(this); + if(!!timer)clearTimeout(timer); + el.fadeOut();//fadeTo("slow",0); + }; + //The target + var el = $(this); + + //Customized Spinners + var spinner01 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner1"><div class="double-bounce1"></div><div class="double-bounce2"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>'; + var spinner02 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner2"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>'; + var spinner03 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner3"><div class="dot1"></div><div class="dot2"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div></div>'; + var spinner04 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner4"></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>'; + var spinner05 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner5"><div class="cube1"></div><div class="cube2"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>'; + var spinner06 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner6"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>'; + var spinner07 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner7"><div class="circ1"></div><div class="circ2"></div><div class="circ3"></div><div class="circ4"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>'; + + //Init styles + var initStyles = { + 'position':el.settings.pos, + 'width':el.settings.width, + 'height':el.settings.height, + 'top':el.settings.top, + 'left':el.settings.left + }; + + //Apply styles + el.css(initStyles); + //Each + el.each(function() { + var a = el.settings.spinner; + //console.log(a) + switch (a) { + case 'spinner1': + el.html(spinner01); + break; + case 'spinner2': + el.html(spinner02); + break; + case 'spinner3': + el.html(spinner03); + break; + case 'spinner4': + el.html(spinner04); + break; + case 'spinner5': + el.html(spinner05); + break; + case 'spinner6': + el.html(spinner06); + break; + case 'spinner7': + el.html(spinner07); + break; + default: + el.html(spinner01); + } + + //Add customized loader image + + if (el.settings.imagePath !='') { + el.html('<div class="fl"><img src="'+el.settings.imagePath+'"><span>'+el.settings.text+'</span></div>'); + } + centerLoader(); + }); + + //Time to hide fakeLoader + if(el.settings.timeToHide>0){ + timer=setTimeout(function(){ + el.fadeOut();//fadeTo("slow",0); + }, el.settings.timeToHide); + } + //Return Styles + this.css({ + //'backgroundColor':el.settings.bgColor, + 'display':"block", + 'zIndex':el.settings.zIndex + }); + + $(".loadingbackground").css(initStyles).css({ + 'backgroundColor':el.settings.bgColor, + 'opacity':el.settings.opacity, + 'zIndex':el.settings.zIndex+1 + }); + $(".loadingTip").css(initStyles).css({ + //'backgroundColor':el.settings.bgColor, + 'zIndex':el.settings.zIndex+2 + }); + return this; + }; // End Fake Loader + + + //Center Spinner + function centerLoader() { + + var winW = $(window).width(); + var winH = $(window).height(); + + var spinnerW = $('.fl').outerWidth(); + var spinnerH = $('.fl').outerHeight(); + var fW = $('.f2').outerWidth(); + var left=(winW/2)-(spinnerW/2); + var left2=(winW/2)-(fW/2); + left=left>0?left:winW/2-20; + left2=left2==0||fW==0?left:left2; + //left2=left2>0?left2:winW/2-40; + left2=left2-20; + console.log("loding gif:"+left+" text:"+left2); + $('.fl').css({ + 'position':'absolute', + 'left':left, + 'top':(winH/2)-(spinnerH/2) + }); + $('.f2').css({ + 'position':'absolute', + 'left':left2, + 'top':(winH/2)+(spinnerH/2) + }); + } + + $(window).load(function(){ + centerLoader(); + $(window).resize(function(){ + centerLoader(); + }); + }); + + +}(jQuery)); + + + + |