| 1 |
- .container-loading{position:fixed;height:100%;width:100%;top:0;left:0}.content{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;height:100%}.spinner-flash-medium{width:60rpx;height:60rpx}.spinner-flash-mini{width:40rpx;height:40rpx}.spinner-flash-large{width:80rpx;height:80rpx}.spinner-flip-medium{width:60rpx;height:60rpx}.spinner-flip-mini{width:40rpx;height:40rpx}.spinner-flip-large{width:80rpx;height:80rpx}.spinner-change-medium{width:30rpx;height:30rpx}.spinner-change-mini{width:20rpx;height:20rpx}.spinner-change-large{width:50rpx;height:50rpx}.flash-spinner{position:relative}.flash-bounce1,.flash-bounce2{width:100%;height:100%;border-radius:50%;background-color:#3963bc;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.flash-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes bounce{0%,100%{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.flip-bounce1{background-color:#3963bc;-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(0) rotateY(0);-webkit-transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.change-spinner{width:240rpx;text-align:center}.change-bounce1{background-color:#3963bc;border-radius:100%;display:inline-block;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:-.32s;animation-delay:-.32s}.change-bounce2{background-color:#3963bc;border-radius:100%;display:inline-block;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-delay:-.16s;animation-delay:-.16s}.change-bounce3{background-color:#3963bc;border-radius:100%;display:inline-block;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.spinner-circle{position:relative}.spinner-circle-mini{width:40rpx;height:40rpx}.spinner-circle-medium{width:60rpx;height:60rpx}.spinner-circle-large{width:70rpx;height:70rpx}.container1>.container-view,.container2>.container-view,.container3>.container-view{border-radius:50%;position:absolute;background-color:#3963bc;-webkit-animation:bouncedelay4 1.2s infinite ease-in-out;animation:bouncedelay4 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.circle-mini{width:12rpx;height:12rpx}.circle-medium{width:15rpx;height:15rpx}.circle-large{width:20rpx;height:20rpx}.spinner-circle .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:-1s;animation-delay:-1s}.container1 .circle2{-webkit-animation-delay:-.9s;animation-delay:-.9s}.container2 .circle2{-webkit-animation-delay:-.8s;animation-delay:-.8s}.container3 .circle2{-webkit-animation-delay:-.7s;animation-delay:-.7s}.container1 .circle3{-webkit-animation-delay:-.6s;animation-delay:-.6s}.container2 .circle3{-webkit-animation-delay:-.5s;animation-delay:-.5s}.container3 .circle3{-webkit-animation-delay:-.4s;animation-delay:-.4s}.container1 .circle4{-webkit-animation-delay:-.3s;animation-delay:-.3s}.container2 .circle4{-webkit-animation-delay:-.2s;animation-delay:-.2s}.container3 .circle4{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes bouncedelay4{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes bouncedelay4{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.rotate{border-radius:50%;animation:rotate .7s linear infinite}.rotate-mini{height:40rpx;width:40rpx;border-top:6rpx solid #3963bc;border-right:6rpx solid transparent!important;border-bottom:6rpx solid #3963bc;border-left:6rpx solid #3963bc}.rotate-medium{height:50rpx;width:50rpx;border-top:6rpx solid #3963bc;border-right:6rpx solid transparent!important;border-bottom:6rpx solid #3963bc;border-left:6rpx solid #3963bc}.rotate-large{height:70rpx;width:70rpx;border-top:8rpx solid #3963bc;border-right:8rpx solid transparent!important;border-bottom:8rpx solid #3963bc;border-left:8rpx solid #3963bc}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
|
