.loader{box-sizing:border-box;display:inline-block;width:50px;height:80px;border-top:5px solid #fff;border-bottom:5px solid #fff;position:relative;background:linear-gradient(var(--primary-color) 30px,transparent 0) no-repeat;background-size:2px 40px;background-position:50% 0;animation:spinx 5s linear infinite}.loader:after,.loader:before{content:"";width:40px;left:50%;height:35px;position:absolute;top:0;transform:translatex(-50%);background:rgba(255,255,255,.4);border-radius:0 0 20px 20px;background-size:100% auto;background-repeat:no-repeat;background-position:0 0;animation:lqt 5s linear infinite}.loader:after{top:auto;bottom:0;border-radius:20px 20px 0 0;animation:lqb 5s linear infinite}@keyframes lqt{0%,to{background-image:linear-gradient(var(--primary-color) 40px,transparent 0);background-position:0 0}50%{background-image:linear-gradient(var(--primary-color) 40px,transparent 0);background-position:0 40px}50.1%{background-image:linear-gradient(var(--primary-color) 40px,transparent 0);background-position:0 -40px}}@keyframes lqb{0%{background-image:linear-gradient(var(--primary-color) 40px,transparent 0);background-position:0 40px}to{background-image:linear-gradient(var(--primary-color) 40px,transparent 0);background-position:0 -40px}}@keyframes spinx{0%,49%{transform:rotate(0deg);background-position:50% 36px}51%,98%{transform:rotate(180deg);background-position:50% 4px}to{transform:rotate(1turn);background-position:50% 36px}}