.loader{--c1:#673b14;--c2:#f8b13b;width:40px;height:80px;border-top:4px solid var(--c1);border-bottom:4px solid var(--c1);background:linear-gradient(90deg,var(--c1)2px,var(--c2)0 5px,var(--c1)0)50%/7px 8px no-repeat;animation:2s linear infinite l5-0;display:grid;overflow:hidden}.loader:before,.loader:after{content:"";width:75%;height:calc(50% - 4px);border:2px solid var(--c1);box-sizing:content-box;-webkit-mask-composite:destination-out;background:linear-gradient(var(--d,0deg),var(--c2)50%,#0000 0)bottom/100% 205%,linear-gradient(var(--c2)0 0)center/0 100%;animation:inherit;background-repeat:no-repeat;border-top:0;border-radius:0 0 40% 40%;grid-area:1/1;margin:0 auto;animation-name:l5-1;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:bottom,0 0;-webkit-mask-size:4px 2px,auto;-webkit-mask-repeat:no-repeat,repeat;-webkit-mask-clip:border-box,border-box;-webkit-mask-origin:border-box,border-box;mask-composite:exclude;mask-mode:match-source,match-source}.loader:after{transform-origin:50% calc(100% + 2px);--s:3px;--d:180deg;transform:scaleY(-1)}@keyframes l5-0{80%{transform:rotate(0)}to{transform:rotate(.5turn)}}@keyframes l5-1{10%,70%{background-size:100% 205%,var(--s,0)100%}70%,to{background-position:top,50%}}