Loader by harman-kanda
#212121
1/* From cssbuttons.io by @harmankanda.github.io/New */ 2 3.pl { 4 width: 5em; 5 height: 5em; 6} 7 8.pl circle { 9 transform-box: fill-box; 10 transform-origin: 50% 50%; 11} 12 13.pl__ring1 { 14 animation: ring1 4s 0s ease-in-out infinite; 15} 16 17.pl__ring2 { 18 animation: ring2 4s 0.04s ease-in-out infinite; 19} 20 21.pl__ring3 { 22 animation: ring3 4s 0.08s ease-in-out infinite; 23} 24 25.pl__ring4 { 26 animation: ring4 4s 0.12s ease-in-out infinite; 27} 28 29.pl__ring5 { 30 animation: ring5 4s 0.16s ease-in-out infinite; 31} 32 33.pl__ring6 { 34 animation: ring6 4s 0.2s ease-in-out infinite; 35} 36 37/* Animations */ 38@keyframes ring1 { 39 from { 40 stroke-dashoffset: -376.237129776; 41 transform: rotate(-0.25turn); 42 animation-timing-function: ease-in; 43 } 44 45 23% { 46 stroke-dashoffset: -94.247778; 47 transform: rotate(1turn); 48 animation-timing-function: ease-out; 49 } 50 51 46%, 50% { 52 stroke-dashoffset: -376.237129776; 53 transform: rotate(2.25turn); 54 animation-timing-function: ease-in; 55 } 56 57 73% { 58 stroke-dashoffset: -94.247778; 59 transform: rotate(3.5turn); 60 animation-timing-function: ease-out; 61 } 62 63 96%, to { 64 stroke-dashoffset: -376.237129776; 65 transform: rotate(4.75turn); 66 } 67} 68 69@keyframes ring2 { 70 from { 71 stroke-dashoffset: -329.207488554; 72 transform: rotate(-0.25turn); 73 animation-timing-function: ease-in; 74 } 75 76 23% { 77 stroke-dashoffset: -82.46680575; 78 transform: rotate(1turn); 79 animation-timing-function: ease-out; 80 } 81 82 46%, 50% { 83 stroke-dashoffset: -329.207488554; 84 transform: rotate(2.25turn); 85 animation-timing-function: ease-in; 86 } 87 88 73% { 89 stroke-dashoffset: -82.46680575; 90 transform: rotate(3.5turn); 91 animation-timing-function: ease-out; 92 } 93 94 96%, to { 95 stroke-dashoffset: -329.207488554; 96 transform: rotate(4.75turn); 97 } 98} 99 100@keyframes ring3 { 101 from { 102 stroke-dashoffset: -288.4484661616; 103 transform: rotate(-0.25turn); 104 animation-timing-function: ease-in; 105 } 106 107 23% { 108 stroke-dashoffset: -72.2566298; 109 transform: rotate(1turn); 110 animation-timing-function: ease-out; 111 } 112 113 46%, 50% { 114 stroke-dashoffset: -288.4484661616; 115 transform: rotate(2.25turn); 116 animation-timing-function: ease-in; 117 } 118 119 73% { 120 stroke-dashoffset: -72.2566298; 121 transform: rotate(3.5turn); 122 animation-timing-function: ease-out; 123 } 124 125 96%, to { 126 stroke-dashoffset: -288.4484661616; 127 transform: rotate(4.75turn); 128 } 129} 130 131@keyframes ring4 { 132 from { 133 stroke-dashoffset: -253.9600625988; 134 transform: rotate(-0.25turn); 135 animation-timing-function: ease-in; 136 } 137 138 23% { 139 stroke-dashoffset: -63.61725015; 140 transform: rotate(1turn); 141 animation-timing-function: ease-out; 142 } 143 144 46%, 50% { 145 stroke-dashoffset: -253.9600625988; 146 transform: rotate(2.25turn); 147 animation-timing-function: ease-in; 148 } 149 150 73% { 151 stroke-dashoffset: -63.61725015; 152 transform: rotate(3.5turn); 153 animation-timing-function: ease-out; 154 } 155 156 96%, to { 157 stroke-dashoffset: -253.9600625988; 158 transform: rotate(4.75turn); 159 } 160} 161 162@keyframes ring5 { 163 from { 164 stroke-dashoffset: -225.7422778656; 165 transform: rotate(-0.25turn); 166 animation-timing-function: ease-in; 167 } 168 169 23% { 170 stroke-dashoffset: -56.5486668; 171 transform: rotate(1turn); 172 animation-timing-function: ease-out; 173 } 174 175 46%, 50% { 176 stroke-dashoffset: -225.7422778656; 177 transform: rotate(2.25turn); 178 animation-timing-function: ease-in; 179 } 180 181 73% { 182 stroke-dashoffset: -56.5486668; 183 transform: rotate(3.5turn); 184 animation-timing-function: ease-out; 185 } 186 187 96%, to { 188 stroke-dashoffset: -225.7422778656; 189 transform: rotate(4.75turn); 190 } 191} 192 193@keyframes ring6 { 194 from { 195 stroke-dashoffset: -203.795111962; 196 transform: rotate(-0.25turn); 197 animation-timing-function: ease-in; 198 } 199 200 23% { 201 stroke-dashoffset: -51.05087975; 202 transform: rotate(1turn); 203 animation-timing-function: ease-out; 204 } 205 206 46%, 50% { 207 stroke-dashoffset: -203.795111962; 208 transform: rotate(2.25turn); 209 animation-timing-function: ease-in; 210 } 211 212 73% { 213 stroke-dashoffset: -51.05087975; 214 transform: rotate(3.5turn); 215 animation-timing-function: ease-out; 216 } 217 218 96%, to { 219 stroke-dashoffset: -203.795111962; 220 transform: rotate(4.75turn); 221 } 222}
2.7K views
2.7K views
MIT License