Loader by doniaskima
#e8e8e8
1/* HTML: <div class="loader"></div> */ 2.loader { 3 width: 35px; 4 height: 80px; 5 position: relative; 6} 7 8.loader:after { 9 content: ""; 10 position: absolute; 11 inset: 0; 12 padding: 3px 5px; 13 border-top: 1px solid #bbb6aa; 14 border-bottom: 4px solid #bbb6aa; 15 background: linear-gradient(#612329 0 0) bottom no-repeat content-box, 16 #e4e0d7; 17 mix-blend-mode: darken; 18 animation: l1 1.5s infinite linear; 19} 20 21.loader:before { 22 content: ""; 23 position: absolute; 24 inset: -18px calc(50% - 2px) 8px; 25 background: #eb6b3e; 26 transform-origin: bottom; 27 transform: rotate(8deg); 28} 29 30@keyframes l1 { 31 0% { 32 background-size: 100% 100% 33 } 34 35 100% { 36 background-size: 100% 5% 37 } 38}
522 views
522 views
Yurex1072 24. February at 17:40
24. February at 17:40
it would be cool if it refilled itself when empty
MIT License