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