Loader by SelfMadeSystem
#fff8ff
1/* Inspired by: m3.material.io/components/progress-indicators/overview */ 2 3.loader { 4 width: 48px; 5 /* Subpixels get cut off */ 6 overflow: visible; 7 transform: rotate(-90deg); 8 transform-origin: center; 9 10 --active: #7627a3; 11 --track: #f2d4fe; 12 13 --duration: 8s; 14 15 animation: spin 2s linear infinite; 16} 17 18@keyframes spin { 19 0% { 20 rotate: 0deg; 21 } 22 23 100% { 24 rotate: 360deg; 25 } 26} 27 28.active { 29 stroke: var(--active); 30 stroke-linecap: round; 31 stroke-dashoffset: 360; 32 animation: active-animation var(--duration) ease-in-out infinite; 33} 34 35@keyframes active-animation { 36 0% { 37 stroke-dasharray: 0 0 0 360 0 360; 38 } 39 12.5% { 40 stroke-dasharray: 0 0 270 90 270 90; 41 } 42 25% { 43 stroke-dasharray: 0 270 0 360 0 360; 44 } 45 37.5% { 46 stroke-dasharray: 0 270 270 90 270 90; 47 } 48 50% { 49 stroke-dasharray: 0 540 0 360 0 360; 50 } 51 50.001% { 52 stroke-dasharray: 0 180 0 360 0 360; 53 } 54 62.5% { 55 stroke-dasharray: 0 180 270 90 270 90; 56 } 57 75% { 58 stroke-dasharray: 0 450 0 360 0 360; 59 } 60 87.5% { 61 stroke-dasharray: 0 450 270 90 270 90; 62 } 63 87.501% { 64 stroke-dasharray: 0 90 270 90 270 90; 65 } 66 100% { 67 stroke-dasharray: 0 360 1 360 0 360; 68 } 69} 70 71.track { 72 stroke: var(--track); 73 stroke-linecap: round; 74 stroke-dashoffset: 360; 75 animation: track-animation var(--duration) ease-in-out infinite; 76} 77 78@keyframes track-animation { 79 0% { 80 stroke-dasharray: 0 20 320 40 320 40; 81 } 82 12.5% { 83 stroke-dasharray: 0 290 50 310 50 310; 84 } 85 25% { 86 stroke-dasharray: 0 290 320 40 320 40; 87 } 88 37.5% { 89 stroke-dasharray: 0 560 50 310 50 310; 90 } 91 37.501% { 92 stroke-dasharray: 0 200 50 310 50 310; 93 } 94 50% { 95 stroke-dasharray: 0 200 320 40 320 40; 96 } 97 62.5% { 98 stroke-dasharray: 0 470 50 310 50 310; 99 } 100 62.501% { 101 stroke-dasharray: 0 110 50 310 50 310; 102 } 103 75% { 104 stroke-dasharray: 0 110 320 40 320 40; 105 } 106 87.5% { 107 stroke-dasharray: 0 380 50 310 50 310; 108 } 109 100% { 110 stroke-dasharray: 0 380 320 40 320 40; 111 } 112} 113
202 views
202 views
MIT License