水波加載動效 water loading
HTML CODE
< div class = " waterLoadingBox" >
< svg version = " 1.1" xmlns = " http://www.w3.org/2000/svg" xmlns: xlink= " http://www.w3.org/1999/xlink" x = " 0px" y = " 0px" style =" display : none; " >
< symbol id = " wave" >
< path d = " M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z" > </ path>
< path d = " M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z" > </ path>
< path d = " M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z" > </ path>
< path d = " M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z" > </ path>
</ symbol>
</ svg>
< div class = " box-loading" >
< div class = " percent" > < div class = " percentNum" id = " countLoading" > 0</ div> < div class = " percentB" > %</ div> </ div>
< div id = " waterLoading" class = " water" > < svg viewBox = " 0 0 560 20" class = " water_wave water_wave_back" > < use xlink: href= " #wave" > </ use> </ svg> < svg viewBox = " 0 0 560 20" class = " water_wave water_wave_front" > < use xlink: href= " #wave" > </ use> </ svg> </ div>
</ div>
</ div>
CSS CODE
.waterLoadingBox *, .waterLoadingBox *:before, .waterLoadingBox *:after { box-sizing : border-box; outline : none; }
.waterLoadingBox { display : none; background : rgba ( 0, 0, 0, 0.6) ; font : 14px/1 'Open Sans' , helvetica, sans-serif; -webkit-font-smoothing : antialiased; width : 100%; height : 100%; position : fixed; left : 0; top : 0; }
.box-loading { height : 280px; width : 280px; position : absolute; top : 50%; left : 50%; -webkit-transform : translate ( -50%, -50%) ; transform : translate ( -50%, -50%) ; background : transparent; border-radius : 100%; overflow : hidden; }
.box-loading .percent { position : absolute; left : 0; top : 0; z-index : 3; width : 100%; height : 100%; display : flex; display : -webkit-flex; align-items : center; justify-content : center; color : #fff; font-size : 64px; }
.box-loading .water { position : absolute; left : 0; top : 0; z-index : 2; width : 100%; height : 100%; -webkit-transform : translate ( 0, 100%) ; transform : translate ( 0, 100%) ; background : #4D6DE3; transition : all .3s; }
.box-loading .water_wave { width : 200%; position : absolute; bottom : 100%; }
.box-loading .water_wave_back { right : 0; fill : #C7EEFF; -webkit-animation : wave-back 1.4s infinite linear; animation : wave-back 1.4s infinite linear; }
.box-loading .water_wave_front { left : 0; fill : #4D6DE3; margin-bottom : -1px; -webkit-animation : wave-front .7s infinite linear; animation : wave-front .7s infinite linear; }
@-webkit-keyframes wave-front { 100% { -webkit-transform : translate ( -50%, 0) ; transform : translate ( -50%, 0) ; } }
@keyframes wave-front { 100% { -webkit-transform : translate ( -50%, 0) ; transform : translate ( -50%, 0) ; } }
@-webkit-keyframes wave-back { 100% { -webkit-transform : translate ( 50%, 0) ; transform : translate ( 50%, 0) ; } }
@keyframes wave-back { 100% { -webkit-transform : translate ( 50%, 0) ; transform : translate ( 50%, 0) ; } }
JS CODE
function setLoadingWater ( isHide) { if ( isHide) { $ ( '.waterLoadingBox' ) . fadeOut ( function ( ) { $ ( '#waterLoading' ) . css ( 'transform' , 'translate(0,100%)' ) ; $ ( '#countLoading' ) . text ( 0 ) ; } ) ; } else { $ ( '.waterLoadingBox' ) . fadeIn ( ) ; } }
var pro = 0 , water = setInterval ( function ( ) { pro === 100 ? ( function ( ) { clearInterval ( water) ; setTimeout ( function ( ) { setLoadingWater ( true ) ; } , 500 ) ; } ( ) ) : console. log ( pro) ; $ ( '#countLoading' ) . text ( pro) ; $ ( "#waterLoading" ) . css ( 'transform' , 'translate(0' + ',' + ( 100 - pro) + '%)' ) ; pro++ ; } , 100 ) ;
setLoadingWater ( ) ;