#MsgLoading{
    display:block;width:100vw;height:100vh;opacity:1;position:fixed;top:0px;left: 0;
    z-index:1099;background-color:rgba(0, 0, 0, 0.1);
}
#MsgLoading #Icon{
    width:50px;height:50px;
    margin-top: -25px; /*高度的一半*/
    margin-left: -25px; /*寬度的一半*/
    border-radius: 10px;/*圓角*/

    position: absolute;top: 50vh; /*從上面開始算，下推 50% (一半) 的位置*/
    left: 50vw; /*從左邊開始算，右推 50% (一半) 的位置*/
    background-image:url("../../assets/img/Rolling-1s-200px.svg");
    background-size:100%;
    background-color:#f5f5f5;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
}
.loadingFadeIn{
    -webkit-animation: loadingIn 0.5s ease forwards;
    animation: loadingIn 0.5s ease forwards;
}
.loadingFadeOut{
    -webkit-animation: loadingOut 0.5s ease forwards;
    animation: loadingOut 0.5s ease forwards;
}
@-webkit-keyframes loadingIn {
    0% {-webkit-transform: scale(1.2, 1.2);opacity: 0;}
    90% {-webkit-transform: scale(1,1);opacity: 1;}
    100% {-webkit-transform: scale(0,0);opacity: 1;}
}

@keyframes loadingIn {
    0% {transform: scale(1.2);opacity: 0;}
    100% {transform: scale(1);opacity: 1;}
}

@-webkit-keyframes loadingOut {
    0% {opacity:1;}
    90%{opacity:0;-webkit-transform: translate3d(0,0,0)}
    100% {opacity:0;-webkit-transform: translate3d(0,100vw,0);-webkit-transform: translateX(100vw)}
}

@keyframes loadingOut {
    0% {opacity:1;}
    90%{opacity:0;transform: translateX(0)}
    100%{opacity:0;transform: translateX(100vw)}
}