#loading {position:fixed;width: 100%;height:100%;left:0px;top:0px;z-index:666;opacity:0;visibility: hidden;transition: opacity 0.5s ease-out, visibility 0.5s ease-out;}
#loading.active {opacity:1;visibility:visible}
#loading .logo {position: absolute;z-index: 2;}
#loading .logo img {    padding: 0px 20%; }
#loading .bg {position:fixed;width: 100%;height:100%;left:0px;top:0px;z-index:1;background-position: center;background-size: cover;}
#loading .layer {height:100%;position:relative;z-index:2;}
#loading .info {position:fixed;width: 100%;left:0px;bottom:0px;z-index:3}
#loading .info > div {}
#loading .info .text {text-align:center;color:#FFF;padding:5px;font-weight:500}
#loading .info .bar {height: 16px;margin-bottom: 30px;background-color:rgba(255,255,255,0.5);border-radius:10px;position:relative;overflow:hidden}
#loading .info .bar > div {background:linear-gradient(180deg, rgba(98,72,163,1) 0%, rgba(72,52,141,1) 100%);height:16px;width:50%;transition: width 1s linear;}