388 views
1.loader { 2 display: flex; 3 align-items: center; 4 margin-left: -0.65em; 5} 6 7.load1 { 8 position: absolute; 9 content: ""; 10 margin-right: 1em; 11 height: 1.2em; 12 width: 1.2em; 13 border-radius: 5px; 14 background-color: white; 15 box-shadow: 0 1px 7px rgba(0,0,0,0.3); 16} 17 18.load2 { 19 position: absolute; 20 margin-right: 1em; 21 content: ""; 22 height: 1.2em; 23 width: 1.2em; 24 border-radius: 5px; 25 background-color: white; 26 animation: 2s flow2 infinite; 27} 28 29.load3 { 30 position: absolute; 31 margin-right: 1em; 32 content: ""; 33 height: 1.2em; 34 width: 1.2em; 35 border-radius: 5px; 36 background-color: white; 37 animation: 2s flow3 infinite; 38} 39 40.load4 { 41 position: absolute; 42 margin-right: 1em; 43 content: ""; 44 height: 1.2em; 45 width: 1.2em; 46 border-radius: 5px; 47 background-color: white; 48 animation: 2s flow4 infinite; 49} 50 51.load5 { 52 position: absolute; 53 margin-right: 1em; 54 content: ""; 55 height: 1.2em; 56 width: 1.2em; 57 border-radius: 5px; 58 background-color: white; 59 animation: 2s flow5 infinite; 60} 61 62.load6 { 63 position: absolute; 64 margin-right: 1em; 65 content: ""; 66 height: 1.2em; 67 width: 1.2em; 68 border-radius: 5px; 69 background-color: white; 70 animation: 6s flow6 infinite; 71} 72 73.load7 { 74 position: absolute; 75 margin-right: 1em; 76 content: ""; 77 height: 1.2em; 78 width: 1.2em; 79 border-radius: 5px; 80 background-color: white; 81 animation: 6s flow7 infinite; 82} 83 84.load8 { 85 position: absolute; 86 margin-right: 1em; 87 content: ""; 88 height: 1.2em; 89 width: 1.2em; 90 border-radius: 5px; 91 background-color: white; 92 animation: 6s flow8 infinite; 93} 94 95.load9 { 96 position: absolute; 97 content: ""; 98 height: 1.2em; 99 width: 1.2em; 100 border-radius: 5px; 101 background-color: white; 102 animation: 6s flow9 infinite; 103} 104 105@keyframes flow2 { 106 50% { 107 transform: translateX(3em); 108 box-shadow: 0 1px 7px rgba(0,0,0,0.3); 109 } 110 111 100% { 112 transform: translateX(0em); 113 } 114} 115 116@keyframes flow3 { 117 50% { 118 transform: translateX(-3em); 119 box-shadow: 0 1px 7px rgba(0,0,0,0.3); 120 } 121 122 100% { 123 transform: translateX(0em); 124 } 125} 126 127@keyframes flow4 { 128 50% { 129 transform: translateY(3em); 130 box-shadow: 0 1px 7px rgba(0,0,0,0.3); 131 } 132 133 100% { 134 transform: translateY(0em); 135 } 136} 137 138@keyframes flow5 { 139 50% { 140 transform: translateY(-3em); 141 box-shadow: 0 1px 7px rgba(0,0,0,0.3); 142 } 143 144 100% { 145 transform: translateY(0em); 146 } 147} 148 149@keyframes flow6 { 150 30% { 151 transform: translateX(3em); 152 box-shadow: 0 1px 7px rgba(0,0,0,0.3); 153 } 154 155 60% { 156 transform: translateX(3em) translateY(-3em); 157 box-shadow: 0 1px 7px rgba(0,0,0,0.3); 158 } 159 160 100% { 161 transform: translateX(0em) translateY(0em); 162 } 163} 164 165@keyframes flow7 { 166 30% { 167 transform: translateX(-3em); 168 box-shadow: 0 1px 7px rgba(0,0,0,0.3); 169 } 170 171 60% { 172 transform: translateX(-3em) translateY(3em); 173 box-shadow: 0 1px 7px rgba(0,0,0,0.3); 174 } 175 176 100% { 177 transform: translateX(0em) translateY(0em); 178 } 179} 180 181@keyframes flow8 { 182 30% { 183 transform: translateY(3em); 184 box-shadow: 0 1px 7px rgba(0,0,0,0.3); 185 } 186 187 60% { 188 transform: translateY(3em) translateX(3em); 189 box-shadow: 0 1px 7px rgba(0,0,0,0.3); 190 } 191 192 100% { 193 transform: translateX(0em) translateY(0em); 194 } 195} 196 197@keyframes flow9 { 198 30% { 199 transform: translateY(-3em); 200 box-shadow: 0 1px 7px rgba(0,0,0,0.3); 201 } 202 203 60% { 204 transform: translateY(-3em) translateX(-3em); 205 box-shadow: 0 1px 7px rgba(0,0,0,0.3); 206 } 207 208 100% { 209 transform: translateX(0em) translateY(0em); 210 } 211}
Praashoo7
Prashant
MIT License