3.7K views
1.loadingspinner { 2 --square: 26px; 3 --offset: 30px; 4 --duration: 2.4s; 5 --delay: 0.2s; 6 --timing-function: ease-in-out; 7 --in-duration: 0.4s; 8 --in-delay: 0.1s; 9 --in-timing-function: ease-out; 10 width: calc( 3 * var(--offset) + var(--square)); 11 height: calc( 2 * var(--offset) + var(--square)); 12 padding: 0px; 13 margin-left: auto; 14 margin-right: auto; 15 margin-top: 10px; 16 margin-bottom: 30px; 17 position: relative; 18} 19 20.loadingspinner div { 21 display: inline-block; 22 background: darkorange; 23 /*background: var(--text-color);*/ 24 /*box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);*/ 25 border: none; 26 border-radius: 2px; 27 width: var(--square); 28 height: var(--square); 29 position: absolute; 30 padding: 0px; 31 margin: 0px; 32 font-size: 6pt; 33 color: black; 34} 35 36.loadingspinner #square1 { 37 left: calc( 0 * var(--offset) ); 38 top: calc( 0 * var(--offset) ); 39 animation: square1 var(--duration) var(--delay) var(--timing-function) infinite, 40 squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both; 41} 42 43.loadingspinner #square2 { 44 left: calc( 0 * var(--offset) ); 45 top: calc( 1 * var(--offset) ); 46 animation: square2 var(--duration) var(--delay) var(--timing-function) infinite, 47 squarefadein var(--in-duration) calc(1 * var(--in-delay)) var(--in-timing-function) both; 48} 49 50.loadingspinner #square3 { 51 left: calc( 1 * var(--offset) ); 52 top: calc( 1 * var(--offset) ); 53 animation: square3 var(--duration) var(--delay) var(--timing-function) infinite, 54 squarefadein var(--in-duration) calc(2 * var(--in-delay)) var(--in-timing-function) both; 55} 56 57.loadingspinner #square4 { 58 left: calc( 2 * var(--offset) ); 59 top: calc( 1 * var(--offset) ); 60 animation: square4 var(--duration) var(--delay) var(--timing-function) infinite, 61 squarefadein var(--in-duration) calc(3 * var(--in-delay)) var(--in-timing-function) both; 62} 63 64.loadingspinner #square5 { 65 left: calc( 3 * var(--offset) ); 66 top: calc( 1 * var(--offset) ); 67 animation: square5 var(--duration) var(--delay) var(--timing-function) infinite, 68 squarefadein var(--in-duration) calc(4 * var(--in-delay)) var(--in-timing-function) both; 69} 70 71@keyframes square1 { 72 0% { 73 left: calc( 0 * var(--offset) ); 74 top: calc( 0 * var(--offset) ); 75 } 76 77 8.333% { 78 left: calc( 0 * var(--offset) ); 79 top: calc( 1 * var(--offset) ); 80 } 81 82 100% { 83 left: calc( 0 * var(--offset) ); 84 top: calc( 1 * var(--offset) ); 85 } 86} 87 88@keyframes square2 { 89 0% { 90 left: calc( 0 * var(--offset) ); 91 top: calc( 1 * var(--offset) ); 92 } 93 94 8.333% { 95 left: calc( 0 * var(--offset) ); 96 top: calc( 2 * var(--offset) ); 97 } 98 99 16.67% { 100 left: calc( 1 * var(--offset) ); 101 top: calc( 2 * var(--offset) ); 102 } 103 104 25.00% { 105 left: calc( 1 * var(--offset) ); 106 top: calc( 1 * var(--offset) ); 107 } 108 109 83.33% { 110 left: calc( 1 * var(--offset) ); 111 top: calc( 1 * var(--offset) ); 112 } 113 114 91.67% { 115 left: calc( 1 * var(--offset) ); 116 top: calc( 0 * var(--offset) ); 117 } 118 119 100% { 120 left: calc( 0 * var(--offset) ); 121 top: calc( 0 * var(--offset) ); 122 } 123} 124 125@keyframes square3 { 126 0%,100% { 127 left: calc( 1 * var(--offset) ); 128 top: calc( 1 * var(--offset) ); 129 } 130 131 16.67% { 132 left: calc( 1 * var(--offset) ); 133 top: calc( 1 * var(--offset) ); 134 } 135 136 25.00% { 137 left: calc( 1 * var(--offset) ); 138 top: calc( 0 * var(--offset) ); 139 } 140 141 33.33% { 142 left: calc( 2 * var(--offset) ); 143 top: calc( 0 * var(--offset) ); 144 } 145 146 41.67% { 147 left: calc( 2 * var(--offset) ); 148 top: calc( 1 * var(--offset) ); 149 } 150 151 66.67% { 152 left: calc( 2 * var(--offset) ); 153 top: calc( 1 * var(--offset) ); 154 } 155 156 75.00% { 157 left: calc( 2 * var(--offset) ); 158 top: calc( 2 * var(--offset) ); 159 } 160 161 83.33% { 162 left: calc( 1 * var(--offset) ); 163 top: calc( 2 * var(--offset) ); 164 } 165 166 91.67% { 167 left: calc( 1 * var(--offset) ); 168 top: calc( 1 * var(--offset) ); 169 } 170} 171 172@keyframes square4 { 173 0% { 174 left: calc( 2 * var(--offset) ); 175 top: calc( 1 * var(--offset) ); 176 } 177 178 33.33% { 179 left: calc( 2 * var(--offset) ); 180 top: calc( 1 * var(--offset) ); 181 } 182 183 41.67% { 184 left: calc( 2 * var(--offset) ); 185 top: calc( 2 * var(--offset) ); 186 } 187 188 50.00% { 189 left: calc( 3 * var(--offset) ); 190 top: calc( 2 * var(--offset) ); 191 } 192 193 58.33% { 194 left: calc( 3 * var(--offset) ); 195 top: calc( 1 * var(--offset) ); 196 } 197 198 100% { 199 left: calc( 3 * var(--offset) ); 200 top: calc( 1 * var(--offset) ); 201 } 202} 203 204@keyframes square5 { 205 0% { 206 left: calc( 3 * var(--offset) ); 207 top: calc( 1 * var(--offset) ); 208 } 209 210 50.00% { 211 left: calc( 3 * var(--offset) ); 212 top: calc( 1 * var(--offset) ); 213 } 214 215 58.33% { 216 left: calc( 3 * var(--offset) ); 217 top: calc( 0 * var(--offset) ); 218 } 219 220 66.67% { 221 left: calc( 2 * var(--offset) ); 222 top: calc( 0 * var(--offset) ); 223 } 224 225 75.00% { 226 left: calc( 2 * var(--offset) ); 227 top: calc( 1 * var(--offset) ); 228 } 229 230 100% { 231 left: calc( 2 * var(--offset) ); 232 top: calc( 1 * var(--offset) ); 233 } 234} 235 236@keyframes squarefadein { 237 0% { 238 transform: scale(0.75); 239 opacity: 0.0; 240 } 241 242 100% { 243 transform: scale(1.0); 244 opacity: 1.0; 245 } 246}
MIT License