Loader by csemszepp
#212121
1.ball { 2 position: absolute; 3 width: 20px; 4 height: 20px; 5 top: calc(50% - 25px); 6 animation: bounce 3s cubic-bezier(1, 0, 0, 1) infinite; 7} 8 9.ball:before { 10 content: ''; 11 position: absolute; 12 width: 100%; 13 height: 100%; 14 background: #fff; 15 border-radius: 100%; 16 animation: bounce2 3s ease-in-out infinite; 17 transform-origin: bottom; 18} 19 20@keyframes bounce2 { 21 0% { 22 transform: scaleY(0.75) scaleX(1.25); 23 } 24 25 14.25% { 26 transform: scaleY(1); 27 } 28 29 28.5% { 30 transform: scaleY(0.75) scaleX(1.25); 31 } 32 33 42.75% { 34 transform: scaleY(1); 35 } 36 37 57% { 38 transform: scaleY(0.75) scaleX(1.25); 39 } 40 41 71.25% { 42 transform: scaleY(1); 43 } 44 45 80% { 46 transform: scaleY(0.75) scaleX(1.25); 47 } 48 49 90% { 50 transform: scaleY(1); 51 } 52 53 100% { 54 transform: scaleY(0.75) scaleX(1.25); 55 } 56} 57 58@keyframes bounce { 59 0% { 60 transform: translateY(0px); 61 } 62 63 14.25% { 64 transform: translateY(-150px); 65 } 66 67 28.5% { 68 transform: translateY(-7.5px); 69 } 70 71 42.75% { 72 transform: translateY(-170px); 73 } 74 75 57% { 76 transform: translateY(-27.5px); 77 } 78 79 71.25% { 80 transform: translateY(-180px); 81 } 82 83 80% { 84 transform: translateY(-35px); 85 } 86 87 90% { 88 transform: translateY(-200px); 89 } 90 91 100% { 92 transform: translateY(0px); 93 } 94} 95 96.shape { 97 width: 300px; 98 height: 300px; 99 position: absolute; 100 left: calc(50% - 150px); 101 top: calc(50% - 75px); 102 animation: shapes2 3s ease-in-out infinite; 103} 104 105@keyframes shapes2 { 106 0% { 107 transform: rotate(90deg) translateX(-20px); 108 } 109 110 14.25% { 111 transform: rotate(90deg) translateX(-20px); 112 } 113 114 28.5% { 115 transform: rotate(135deg); 116 } 117 118 42.75% { 119 transform: rotate(162deg); 120 } 121 122 57% { 123 transform: rotate(180deg); 124 } 125 126 71.25% { 127 transform: rotate(245.5deg); 128 } 129 130 80% { 131 transform: rotate(336.5deg); 132 } 133 134 100% { 135 transform: rotate(90deg) translateX(-20px); 136 } 137} 138 139.shape:before, .shape:after { 140 content: ''; 141 position: absolute; 142 width: 100%; 143 height: 100%; 144 left: 0; 145 top: 0; 146 background: #fdb20f; 147 animation: shapes 3s ease-in-out infinite; 148 clip-path: polygon(20% 21%, 50% 8%, 80% 21%, 90% 50%, 80% 80%, 50% 91%, 21% 79%, 8% 51%); 149} 150 151.shape:after { 152 width: 90%; 153 height: 90%; 154 background: repeating-linear-gradient(to right, #fff, #fff 2px, #fdb20f 2px, #fdb20f 5px); 155 top: 5%; 156 left: 5%; 157 background-position: 20px 30px; 158} 159 160@keyframes shapes { 161 0% { 162 clip-path: polygon(91% 50%, 91% 50%, 29% 86%, 30% 86%, 30% 86%, 30% 86%, 30% 14%, 30% 14%); 163 background-position: 20px 30px; 164 } 165 166 14.25% { 167 clip-path: polygon(91% 50%, 91% 50%, 29% 86%, 30% 86%, 30% 86%, 30% 86%, 30% 14%, 30% 14%); 168 background-position: 120px 30px; 169 } 170 171 28.5% { 172 clip-path: polygon(91% 50%, 91% 50%, 50% 91%, 50% 91%, 50% 91%, 50% 91%, 9% 50%, 50% 9%); 173 background-position: 20px 30px; 174 } 175 176 42.75% { 177 clip-path: polygon(63% 11%, 91% 50%, 63% 89%, 63% 89%, 63% 89%, 63% 89%, 16% 74%, 16% 26%); 178 background-position: -120px 30px; 179 } 180 181 57% { 182 clip-path: polygon(29% 14%, 71% 14%, 91% 50%, 91% 50%, 71% 86%, 71% 86%, 30% 86%, 9% 50%); 183 background-position: 20px 30px; 184 } 185 186 71.25% { 187 clip-path: polygon(13% 32%, 41% 10%, 76% 18%, 91% 50%, 76% 83%, 76% 83%, 41% 90%, 13% 68%); 188 background-position: 120px 30px; 189 } 190 191 80% { 192 clip-path: polygon(20% 21%, 50% 8%, 80% 21%, 90% 50%, 80% 80%, 50% 91%, 21% 79%, 8% 51%); 193 background-position: 20px 30px; 194 } 195 196 83% { 197 clip-path: polygon(13% 32%, 41% 10%, 76% 18%, 91% 50%, 76% 83%, 76% 83%, 41% 90%, 13% 68%); 198 background-position: 20px 30px; 199 } 200 201 86% { 202 clip-path: polygon(29% 14%, 71% 14%, 91% 50%, 91% 50%, 71% 86%, 71% 86%, 30% 86%, 9% 50%); 203 background-position: 20px 30px; 204 } 205 206 89% { 207 clip-path: polygon(63% 11%, 91% 50%, 63% 89%, 63% 89%, 63% 89%, 63% 89%, 16% 74%, 16% 26%); 208 background-position: 20px 30px; 209 } 210 211 92% { 212 clip-path: polygon(91% 50%, 91% 50%, 50% 91%, 50% 91%, 50% 91%, 50% 91%, 9% 50%, 50% 9%); 213 } 214 215 95% { 216 clip-path: polygon(91% 50%, 91% 50%, 29% 86%, 30% 86%, 30% 86%, 30% 86%, 30% 14%, 30% 14%); 217 } 218 219 100% { 220 clip-path: polygon(91% 50%, 91% 50%, 29% 86%, 30% 86%, 30% 86%, 30% 86%, 30% 14%, 30% 14%); 221 } 222}
408 views
408 views
MIT License