#loader{width:100%;height:100%;position:fixed;background:#252525;z-index:100;display:flex;align-items:center;justify-content:center}#loader .content{display:block;position:relative}.mask{position:absolute;border-radius:2px;overflow:hidden;perspective:1000;backface-visibility:hidden}.plane{background:#fff;width:400%;height:100%;position:absolute;z-index:100;perspective:1000;backface-visibility:hidden}#loader.active #top .plane{z-index:2000;animation:trans1 1s linear 0s backwards}#loader.active #middle .plane,#loader.active #middle2 .plane,#loader.active #middle3 .plane{background:#bbb;animation:trans2 1s linear .5s backwards}#loader.active #bottom .plane{z-index:2000;animation:trans3 1.5s linear .3s backwards}#top{width:53px;height:20px;left:-10px;transform:skew(-15deg,0) rotate(90deg);z-index:100}#middle,#middle2,#middle3{width:30px;height:10px;transform:skew(15deg,0)}#middle{left:35px;top:-16px}#middle2{left:40px;top:5px}#middle3{left:45px;top:26px}#bottom{width:53px;height:12px;top:4px;left:10px;transform:skew(15deg,0) rotate(-90deg)}#top .plane{transform:translate3d(53px,0,0)}#middle .plane,#middle2 .plane,#middle3 .plane{transform:translate3d(-160px,0,0)}#bottom .plane{transform:translate3d(53px,0,0)}@keyframes trans1{to{transform:translate3d(-250px,0,0)}}@keyframes trans2{to{transform:translate3d(53px,0,0)}}@keyframes trans3{to{transform:translate3d(-220px,0,0)}}