Loader by adilsarfraz02
#e8e8e8
1.custom-loader { 2 width: 40px; 3 height: 10px; 4 color: #f000b4; 5 background: radial-gradient(farthest-side, currentColor 90%, #0000) left / 6 10px 10px, 7 radial-gradient(farthest-side, currentColor 90%, #0000) center/10px 10px, 8 radial-gradient(farthest-side, currentColor 90%, #0000) right / 10px 10px, 9 linear-gradient(currentColor 0 0) center/100% 4px; 10 background-repeat: no-repeat; 11 position: relative; 12 animation: s6 2s infinite linear; 13} 14.custom-loader:before, 15.custom-loader:after { 16 content: ""; 17 position: absolute; 18 inset: 0; 19 background: inherit; 20 animation: inherit; 21 --s: calc(50% - 5px); 22 animation-direction: reverse; 23} 24.custom-loader:after { 25 --s: calc(5px - 50%); 26} 27 28@keyframes s6 { 29 0% { 30 transform: translate(var(--s, 0)) rotate(0); 31 } 32 100% { 33 transform: translate(var(--s, 0)) rotate(1turn); 34 } 35} 36
313 views
313 views
MIT License