body{margin:0}#loading-bg{width:100%;height:100%;background:#fff;display:block;position:absolute}.loading-logo{position:absolute;left:50%;transform:translate(-50%);top:40%}.loading{position:absolute;left:calc(50% - 35px);top:50%;width:55px;height:55px;border-radius:50%;box-sizing:border-box;border:3px solid transparent}.loading .effect-1,.loading .effect-2{position:absolute;width:100%;height:100%;border:3px solid transparent;border-left:3px solid #0f172a;border-radius:50%;box-sizing:border-box}.loading .effect-1{-webkit-animation:rotate 1s ease infinite;animation:rotate 1s ease infinite}.loading .effect-2{-webkit-animation:rotateOpacity 1s ease infinite .1s;animation:rotateOpacity 1s ease infinite .1s}.loading .effect-3{position:absolute;width:100%;height:100%;border:3px solid transparent;border-left:3px solid #0f172a;-webkit-animation:rotateOpacity 1s ease infinite .2s;animation:rotateOpacity 1s ease infinite .2s;border-radius:50%;box-sizing:border-box}.loading .effects{transition:all .3s ease}@-webkit-keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@-webkit-keyframes rotateOpacity{0%{transform:rotate(0);opacity:.1}to{transform:rotate(1turn);opacity:1}}@keyframes rotateOpacity{0%{transform:rotate(0);opacity:.1}to{transform:rotate(1turn);opacity:1}}