This post is saved as a draft.
#212121
1.loader { 2 display: block; 3 width: 150px; 4 height: auto; 5} 6 7.loader_body, 8 .loader_front, 9 .loader_handlebars, 10 .loader_pedals, 11 .loader_pedals-spin, 12 .loader_seat, 13 .loader_spokes, 14 .loader_spokes-spin, 15 .loader_tire { 16 animation: bikeBody 3s ease-in-out infinite; 17 stroke: var(--primary); 18 transition: stroke var(--trans-dur); 19} 20 21.loader_front { 22 animation-name: bikeFront; 23} 24 25.loader_handlebars { 26 animation-name: bikeHandlebars; 27} 28 29.loader_pedals { 30 animation-name: bikePedals; 31} 32 33.loader_pedals-spin { 34 animation-name: bikePedalsSpin; 35} 36 37.loader_seat { 38 animation-name: bikeSeat; 39} 40 41.loader_spokes, 42 .loader_tire { 43 stroke: currentColor; 44} 45 46.loader_spokes { 47 animation-name: bikeSpokes; 48} 49 50.loader_spokes-spin { 51 animation-name: bikeSpokesSpin; 52} 53 54.loader_tire { 55 animation-name: bikeTire; 56} 57 58 /* Dark theme */ 59@media (prefers-color-scheme: dark) { 60 :root { 61 --bg: hsl(var(--hue), 90%, 10%); 62 --fg: hsl(var(--hue), 90%, 90%); 63 } 64} 65 66 /* Animations */ 67@keyframes bikeBody { 68 from { 69 stroke-dashoffset: 79; 70 } 71 72 33%, 73 67% { 74 stroke-dashoffset: 0; 75 } 76 77 to { 78 stroke-dashoffset: -79; 79 } 80} 81 82@keyframes bikeFront { 83 from { 84 stroke-dashoffset: 19; 85 } 86 87 33%, 88 67% { 89 stroke-dashoffset: 0; 90 } 91 92 to { 93 stroke-dashoffset: -19; 94 } 95} 96 97@keyframes bikeHandlebars { 98 from { 99 stroke-dashoffset: 10; 100 } 101 102 33%, 103 67% { 104 stroke-dashoffset: 0; 105 } 106 107 to { 108 stroke-dashoffset: -10; 109 } 110} 111 112@keyframes bikePedals { 113 from { 114 animation-timing-function: ease-in; 115 stroke-dashoffset: -25.133; 116 } 117 118 33%, 119 67% { 120 animation-timing-function: ease-out; 121 stroke-dashoffset: -21.991; 122 } 123 124 to { 125 stroke-dashoffset: -25.133; 126 } 127} 128 129@keyframes bikePedalsSpin { 130 from { 131 transform: rotate(0.1875turn); 132 } 133 134 to { 135 transform: rotate(3.1875turn); 136 } 137} 138 139@keyframes bikeSeat { 140 from { 141 stroke-dashoffset: 5; 142 } 143 144 33%, 145 67% { 146 stroke-dashoffset: 0; 147 } 148 149 to { 150 stroke-dashoffset: -5; 151 } 152} 153 154@keyframes bikeSpokes { 155 from { 156 animation-timing-function: ease-in; 157 stroke-dashoffset: -31.416; 158 } 159 160 33%, 161 67% { 162 animation-timing-function: ease-out; 163 stroke-dashoffset: -23.562; 164 } 165 166 to { 167 stroke-dashoffset: -31.416; 168 } 169} 170 171@keyframes bikeSpokesSpin { 172 from { 173 transform: rotate(0); 174 } 175 176 to { 177 transform: rotate(3turn); 178 } 179} 180 181@keyframes bikeTire { 182 from { 183 animation-timing-function: ease-in; 184 stroke-dashoffset: 56.549; 185 transform: rotate(0); 186 } 187 188 33% { 189 stroke-dashoffset: 0; 190 transform: rotate(0.33turn); 191 } 192 193 67% { 194 animation-timing-function: ease-out; 195 stroke-dashoffset: 0; 196 transform: rotate(0.67turn); 197 } 198 199 to { 200 stroke-dashoffset: -56.549; 201 transform: rotate(1turn); 202 } 203}
Variation of aloader
Variation of aloader