Loader by Charly-T
#212121
1.container { 2 overflow: hidden; 3} 4 5.container svg { 6 --spin-duration: 2000ms; 7 --infinity-duration: 2000ms; 8 --hsl-base-h: 5deg; 9 --hsl-base-s: 70%; 10 --hsl-base-l: 50%; 11 animation: spin81213 var(--spin-duration) linear infinite; 12} 13 14.eight { 15 --eight-length-px: 60.84563446044922px; 16 /* As seen on getTotalLength */ 17 --offset: calc(var(--order) * 5px); 18 animation: infinity8123 var(--infinity-duration) linear infinite; 19 d: path("m5 5a1 1 0 0110 0c0 4-10 6-10 10a1 1 0 0010 0c0-4-10-6-10-10"); 20 fill: none; 21 stroke: hsl(calc(var(--hsl-base-h) * var(--order)) var(--hsl-base-s) var(--hsl-base-l)); 22 stroke-dasharray: 6px calc(var(--eight-length-px) - 6px); 23 stroke-linecap: round; 24 stroke-width: calc(1 - var(--order) / 10); 25} 26 27@keyframes infinity8123 { 28 0% { 29 stroke-dashoffset: calc(var(--eight-length-px) + var(--offset)); 30 } 31 32 100% { 33 stroke-dashoffset: var(--offset); 34 } 35} 36 37@keyframes spin81213 { 38 0% { 39 transform: rotate(0) 40 } 41 42 100% { 43 transform: rotate(360deg) 44 } 45}
1.1K views
1.1K views
MIT License