Loader by doniaskima
#e8e8e8
1/* HTML: <div class="loader"></div> */ 2.loader { 3 --c1: #673b14; 4 --c2: #f8b13b; 5 width: 40px; 6 height: 80px; 7 border-top: 4px solid var(--c1); 8 border-bottom: 4px solid var(--c1); 9 background: linear-gradient(90deg, var(--c1) 2px, var(--c2) 0 5px,var(--c1) 0) 50%/7px 8px no-repeat; 10 display: grid; 11 overflow: hidden; 12 animation: l5-0 2s infinite linear; 13} 14 15.loader::before, 16.loader::after { 17 content: ""; 18 grid-area: 1/1; 19 width: 75%; 20 height: calc(50% - 4px); 21 margin: 0 auto; 22 border: 2px solid var(--c1); 23 border-top: 0; 24 box-sizing: content-box; 25 border-radius: 0 0 40% 40%; 26 -webkit-mask: linear-gradient(#000 0 0) bottom/4px 2px no-repeat, 27 linear-gradient(#000 0 0); 28 -webkit-mask-composite: destination-out; 29 mask-composite: exclude; 30 background: linear-gradient(var(--d,0deg),var(--c2) 50%,#0000 0) bottom /100% 205%, 31 linear-gradient(var(--c2) 0 0) center/0 100%; 32 background-repeat: no-repeat; 33 animation: inherit; 34 animation-name: l5-1; 35} 36 37.loader::after { 38 transform-origin: 50% calc(100% + 2px); 39 transform: scaleY(-1); 40 --s: 3px; 41 --d: 180deg; 42} 43 44@keyframes l5-0 { 45 80% { 46 transform: rotate(0) 47 } 48 49 100% { 50 transform: rotate(0.5turn) 51 } 52} 53 54@keyframes l5-1 { 55 10%,70% { 56 background-size: 100% 205%,var(--s,0) 100% 57 } 58 59 70%,100% { 60 background-position: top,center 61 } 62}
637 views
637 views
MIT License