Loader by carhtube
#e8e8e8
1.loader { 2 background: linear-gradient( 3 90deg, 4 #6f22ff, 5 #00aaff, 6 #2cc92c, 7 #00aaff, 8 #6f22ff 9 ); 10 background-size: 600% 600%; 11 width: 100px; 12 height: 100px; 13 border-radius: 50%; 14 display: flex; 15 justify-content: center; 16 align-items: center; 17 animation: neonRotate 10s linear infinite; 18 position: relative; 19} 20.circleMiddle { 21 background-color: rgb(255, 255, 255); 22 width: 80px; 23 height: 80px; 24 border-radius: 50%; 25 z-index: 99; 26} 27.worm { 28 position: absolute; 29 width: 20px; 30 height: 105px; 31 background-color: hsl(0, 0%, 100%); 32 border-radius: 5px; 33 animation: rotateWorm 4s linear infinite; 34 z-index: 80; 35} 36@keyframes neonRotate { 37 0%, 38 100% { 39 background-position: 0% 0%; 40 } 41 25%, 42 75% { 43 background-position: 100% 0%; 44 } 45 50% { 46 background-position: 0% 100%; 47 } 48} 49@keyframes rotateWorm { 50 from { 51 transform: rotate(0deg); 52 } 53 to { 54 transform: rotate(360deg); 55 } 56} 57
267 views
267 views
MIT License