@SelfMadeSystem
#animation#gradient#loader#spinner#text animation#animated#gradients#svg
#2121214.3K views
1.absolute { 2 position: absolute; 3} 4 5.inline-block { 6 display: inline-block; 7} 8 9.loader { 10 display: flex; 11 margin: 0.25em 0; 12} 13 14.w-2 { 15 width: 0.5em; 16} 17 18.dash { 19 animation: dashArray 2s ease-in-out infinite, 20 dashOffset 2s linear infinite; 21} 22 23.spin { 24 animation: spinDashArray 2s ease-in-out infinite, 25 spin 8s ease-in-out infinite, 26 dashOffset 2s linear infinite; 27 transform-origin: center; 28} 29 30@keyframes dashArray { 31 0% { 32 stroke-dasharray: 0 1 359 0; 33 } 34 35 50% { 36 stroke-dasharray: 0 359 1 0; 37 } 38 39 100% { 40 stroke-dasharray: 359 1 0 0; 41 } 42} 43 44@keyframes spinDashArray { 45 0% { 46 stroke-dasharray: 270 90; 47 } 48 49 50% { 50 stroke-dasharray: 0 360; 51 } 52 53 100% { 54 stroke-dasharray: 270 90; 55 } 56} 57 58@keyframes dashOffset { 59 0% { 60 stroke-dashoffset: 365; 61 } 62 63 100% { 64 stroke-dashoffset: 5; 65 } 66} 67 68@keyframes spin { 69 0% { 70 rotate: 0deg; 71 } 72 73 12.5%, 74 25% { 75 rotate: 270deg; 76 } 77 78 37.5%, 79 50% { 80 rotate: 540deg; 81 } 82 83 62.5%, 84 75% { 85 rotate: 810deg; 86 } 87 88 87.5%, 89 100% { 90 rotate: 1080deg; 91 } 92} 93
MIT License