Loader by fanishah
#e8e8e8
1.loader { 2 display: block; 3 width: 8em; 4 height: 8em; 5} 6 7.loader_ring { 8 stroke: hsla(var(--hue), 90%, 5%, 0.1); 9 transition: stroke 0.3s; 10} 11 12.loader_worm1, 13 .loader_worm2, 14 .loader_worm2-1 { 15 animation: worm1 5s ease-in infinite; 16} 17 18.loader_worm1 { 19 transform-origin: 64px 64px; 20} 21 22.loader_worm2, 23 .loader_worm2-1 { 24 transform-origin: 22px 22px; 25} 26 27.loader_worm2 { 28 animation-name: worm2; 29 animation-timing-function: linear; 30} 31 32.loader_worm2-1 { 33 animation-name: worm2-1; 34 stroke-dashoffset: 175.92; 35} 36 37 /* Dark theme */ 38@media (prefers-color-scheme: dark) { 39 :root { 40 --bg: hsl(var(--hue), 90%, 5%); 41 --fg: hsl(var(--hue), 90%, 95%); 42 } 43 44 .loader_ring { 45 stroke: hsla(var(--hue), 90%, 95%, 0.1); 46 } 47} 48 49 /* Animations */ 50@keyframes worm1 { 51 from, 52 to { 53 stroke-dashoffset: 0; 54 } 55 56 12.5% { 57 animation-timing-function: ease-out; 58 stroke-dashoffset: -175.91; 59 } 60 61 25% { 62 animation-timing-function: cubic-bezier(0, 0, 0.43, 1); 63 stroke-dashoffset: -307.88; 64 } 65 66 50% { 67 animation-timing-function: ease-in; 68 stroke-dashoffset: -483.8; 69 } 70 71 62.5% { 72 animation-timing-function: ease-out; 73 stroke-dashoffset: -307.88; 74 } 75 76 75% { 77 animation-timing-function: cubic-bezier(0, 0, 0.43, 1); 78 stroke-dashoffset: -175.91; 79 } 80} 81 82@keyframes worm2 { 83 from, 84 12.5%, 85 75%, 86 to { 87 transform: rotate(0) translate(-42px, 0); 88 } 89 90 25%, 91 62.5% { 92 transform: rotate(0.5turn) translate(-42px, 0); 93 } 94} 95 96@keyframes worm2-1 { 97 from { 98 stroke-dashoffset: 175.91; 99 transform: rotate(0); 100 } 101 102 12.5% { 103 animation-timing-function: cubic-bezier(0, 0, 0.42, 1); 104 stroke-dashoffset: 0; 105 transform: rotate(0); 106 } 107 108 25% { 109 animation-timing-function: linear; 110 stroke-dashoffset: 0; 111 transform: rotate(1.5turn); 112 } 113 114 37.5%, 115 50% { 116 stroke-dashoffset: -175.91; 117 transform: rotate(1.5turn); 118 } 119 120 62.5% { 121 animation-timing-function: cubic-bezier(0, 0, 0.42, 1); 122 stroke-dashoffset: 0; 123 transform: rotate(1.5turn); 124 } 125 126 75% { 127 animation-timing-function: linear; 128 stroke-dashoffset: 0; 129 transform: rotate(0); 130 } 131 132 87.5%, 133 to { 134 stroke-dashoffset: 175.92; 135 transform: rotate(0); 136 } 137}
696 views
696 views
MIT License