#e8e8e8
1.spinner { 2 --red: #d62d20; 3 --blue: #0057e7; 4 --green: #008744; 5 --yellow: #ffa700; 6 position: relative; 7 width: 60px; 8} 9 10.spinner:before { 11 content: ""; 12 display: block; 13 padding-top: 100%; 14} 15 16.circular { 17 animation: rotate73451 2s linear infinite; 18 height: 100%; 19 transform-origin: center center; 20 width: 100%; 21 position: absolute; 22 top: 0; 23 bottom: 0; 24 left: 0; 25 right: 0; 26 margin: auto; 27} 28 29.path { 30 stroke-dasharray: 1, 200; 31 stroke-dashoffset: 0; 32 animation: dash0175 1.5s ease-in-out infinite, color7123 6s ease-in-out infinite; 33 stroke-linecap: round; 34} 35 36@keyframes rotate73451 { 37 100% { 38 transform: rotate(360deg); 39 } 40} 41 42@keyframes dash0175 { 43 0% { 44 stroke-dasharray: 1, 200; 45 stroke-dashoffset: 0; 46 } 47 48 50% { 49 stroke-dasharray: 89, 200; 50 stroke-dashoffset: -35px; 51 } 52 53 100% { 54 stroke-dasharray: 89, 200; 55 stroke-dashoffset: -124px; 56 } 57} 58 59@keyframes color7123 { 60 100%, 0% { 61 stroke: var(--red); 62 } 63 64 40% { 65 stroke: var(--blue); 66 } 67 68 66% { 69 stroke: var(--green); 70 } 71 72 80%, 90% { 73 stroke: var(--yellow); 74 } 75} 76 77 78
1.8K views
1.8K views
Comments
MIT License