:root{--animation-color:#bcbcbc}.loader{width:48px;height:48px;display:inline-block;position:relative;transform:rotate(45deg)}.loader:before{content:"";box-sizing:border-box;width:24px;height:24px;animation:4s infinite animloader;position:absolute;top:-24px;left:0}.loader:after{content:"";box-sizing:border-box;background:#ffffffd9;width:24px;height:24px;animation:2s infinite animloader2;position:absolute;top:0;left:0;box-shadow:0 0 10px #00000026}@keyframes animloader{0%{box-shadow:0 24px #fff0,24px 24px #fff0,24px 48px #fff0,0 48px #fff0}12%{box-shadow:0 24px var(--animation-color), 24px 24px #fff0, 24px 48px #fff0, 0px 48px #fff0}25%{box-shadow:0 24px var(--animation-color), 24px 24px var(--animation-color), 24px 48px #fff0, 0px 48px #fff0}37%{box-shadow:0 24px var(--animation-color), 24px 24px var(--animation-color), 24px 48px var(--animation-color), 0px 48px #fff0}50%{box-shadow:0 24px var(--animation-color), 24px 24px var(--animation-color), 24px 48px var(--animation-color), 0px 48px var(--animation-color)}62%{box-shadow:0 24px #fff0, 24px 24px var(--animation-color), 24px 48px var(--animation-color), 0px 48px var(--animation-color)}75%{box-shadow:0 24px #fff0, 24px 24px #fff0, 24px 48px var(--animation-color), 0px 48px var(--animation-color)}87%{box-shadow:0 24px #fff0, 24px 24px #fff0, 24px 48px #fff0, 0px 48px var(--animation-color)}to{box-shadow:0 24px #fff0,24px 24px #fff0,24px 48px #fff0,0 48px #fff0}}@keyframes animloader2{0%{transform:translate(0)rotateX(0)rotateY(0)}25%{transform:translate(100%)rotateX(0)rotateY(180deg)}50%{transform:translate(100%,100%)rotateX(-180deg)rotateY(180deg)}75%{transform:translateY(100%)rotateX(-180deg)rotateY(360deg)}to{transform:translate(0)rotateX(0)rotateY(360deg)}}