Loader by VashonG
#212121
1.star { 2 margin: auto; 3 width: 16em; 4 height: 16em; 5} 6.star__stroke { 7 --dur: 2s; 8 animation: stroke1 var(--dur) linear infinite; 9} 10.star__stroke--2 { 11 animation-name: stroke2; 12 animation-delay: calc(var(--dur) / -2); 13} 14.star__stroke--3 { 15 animation-name: stroke3; 16 animation-direction: reverse; 17} 18.star__stroke--4 { 19 animation-name: stroke4; 20 animation-delay: calc(var(--dur) / -2); 21 animation-direction: reverse; 22} 23 24@keyframes stroke1 { 25 from { 26 stroke-dashoffset: 0; 27 } 28 to { 29 stroke-dashoffset: 124; 30 } 31} 32@keyframes stroke2 { 33 from { 34 stroke-dashoffset: 0; 35 } 36 to { 37 stroke-dashoffset: 248; 38 } 39} 40@keyframes stroke3 { 41 from { 42 stroke-dashoffset: 0; 43 } 44 to { 45 stroke-dashoffset: 372; 46 } 47} 48@keyframes stroke4 { 49 from { 50 stroke-dashoffset: 0; 51 } 52 to { 53 stroke-dashoffset: 496; 54 } 55} 56
339 views
339 views
MIT License