Loader by Tsiangana
#e8e8e8
1.light { 2 position: absolute; 3 left: 22px; 4 fill: rgba(37, 37, 37, 0.774); 5} 6 7.loader { 8 width: 80px; 9 height: 40px; 10 border: 2px solid #22f49e; 11 border-right-color: transparent; 12 padding: 3px; 13 background: repeating-linear-gradient(90deg, #22f49e 0 10px, #0000 0 15px) 14 left/0% 100% no-repeat content-box content-box; 15 position: relative; 16 animation: p5 2s infinite steps(6); 17} 18.loader::before { 19 content: ""; 20 position: absolute; 21 top: -2px; 22 bottom: -2px; 23 left: 100%; 24 width: 10px; 25 background: linear-gradient( 26 #0000 calc(50% - 7px), 27 #22f49e 0 calc(50% - 5px), 28 #0000 0 calc(50% + 5px), 29 #22f49e 0 calc(50% + 7px), 30 #0000 0 31 ) 32 left / 100% 100%, 33 linear-gradient(#22f49e calc(50% - 5px), #0000 0 calc(50% + 5px), #22f49e 0) 34 left / 2px 100%, 35 linear-gradient(#0000 calc(50% - 5px), #22f49e 0 calc(50% + 5px), #0000 0) 36 right/2px 100%; 37 background-repeat: no-repeat; 38} 39@keyframes p5 { 40 100% { 41 background-size: 120% 100%; 42 } 43} 44
383 views
383 views
MIT License