[dir] body{margin:0}#loading-bg{width:100%;height:100%;display:block;position:absolute}[dir] #loading-bg{background:#fff}.loading-logo{position:absolute;top:40%}[dir=ltr] .loading-logo{left:calc(50% - 45px)}[dir=rtl] .loading-logo{right:calc(50% - 45px)}.loading{box-sizing:border-box;width:55px;height:55px;position:absolute;top:50%}[dir] .loading{border:3px solid #0000;border-radius:50%}[dir=ltr] .loading{left:calc(50% - 35px)}[dir=rtl] .loading{right:calc(50% - 35px)}.loading .effect-1,.loading .effect-2{box-sizing:border-box;width:100%;height:100%;position:absolute}[dir] .loading .effect-1,[dir] .loading .effect-2{border:3px solid #0000;border-radius:50%}[dir=ltr] .loading .effect-1,[dir=ltr] .loading .effect-2{border-left:3px solid #7961f9}[dir=rtl] .loading .effect-1,[dir=rtl] .loading .effect-2{border-right:3px solid #7961f9}[dir=ltr] .loading .effect-1{animation:1s infinite rotate-ltr}[dir=rtl] .loading .effect-1{animation:1s infinite rotate-rtl}[dir=ltr] .loading .effect-2{animation:1s .1s infinite rotateOpacity-ltr}[dir=rtl] .loading .effect-2{animation:1s .1s infinite rotateOpacity-rtl}.loading .effect-3{box-sizing:border-box;width:100%;height:100%;position:absolute}[dir] .loading .effect-3{border:3px solid #0000;border-radius:50%}[dir=ltr] .loading .effect-3{border-left:3px solid #7961f9;animation:1s .2s infinite rotateOpacity-ltr}[dir=rtl] .loading .effect-3{border-right:3px solid #7961f9;animation:1s .2s infinite rotateOpacity-rtl}.loading .effects{transition:all .3s}@keyframes rotate-ltr{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes rotate-rtl{0%{transform:rotate(0)}to{transform:rotate(-1turn)}}@keyframes rotateOpacity-ltr{0%{opacity:.1;transform:rotate(0)}to{opacity:1;transform:rotate(1turn)}}@keyframes rotateOpacity-rtl{0%{opacity:.1;transform:rotate(0)}to{opacity:1;transform:rotate(-1turn)}}