Loader by JaydipPrajapati1910
#e8e8e8
1.container { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5} 6 7.container div { 8 position: absolute; 9 width: 90px; 10 height: 51px; 11} 12 13.container div:nth-of-type(2) { 14 transform: rotate(60deg) 15} 16 17.container div:nth-of-type(3) { 18 transform: rotate(-60deg) 19} 20 21.container div div { 22 width: 100%; 23 height: 100%; 24 position: relative 25} 26 27.container div div span { 28 position: absolute; 29 width: 4px; 30 height: 0%; 31 background: #053146; 32 z-index: 999999; 33} 34 35.h1 { 36 left: 0; 37 animation: load1 7.2s ease infinite; 38} 39 40.h2 { 41 right: 0; 42 animation: load2 7.2s ease .6s infinite; 43} 44 45.h3 { 46 right: 0; 47 animation: load3 7.2s ease 1.2s infinite; 48} 49 50.h4 { 51 right: 0; 52 animation: load4 7.2s ease 1.8s infinite; 53} 54 55.h5 { 56 left: 0; 57 animation: load5 7.2s ease 2.4s infinite; 58} 59 60.h6 { 61 left: 0; 62 animation: load6 7.2s ease 3s infinite; 63} 64 65@keyframes load1 { 66 0% { 67 bottom: 0; 68 height: 0 69 } 70 71 6.944444444% { 72 bottom: 0; 73 height: 100% 74 } 75 76 50% { 77 top: 0; 78 height: 100% 79 } 80 81 59.944444433% { 82 top: 0; 83 height: 0 84 } 85/* 91.6666667%{top:0;height:0%;} */ 86} 87 88@keyframes load2 { 89 0% { 90 top: 0; 91 height: 0 92 } 93 94 6.944444444% { 95 top: 0; 96 height: 100% 97 } 98 99 50% { 100 bottom: 0; 101 height: 100% 102 } 103 104 59.944444433% { 105 bottom: 0; 106 height: 0 107 } 108/* 91.6666667%{bottom:0;height:0%} */ 109} 110 111@keyframes load3 { 112 0% { 113 top: 0; 114 height: 0 115 } 116 117 6.944444444% { 118 top: 0; 119 height: 100% 120 } 121 122 50% { 123 bottom: 0; 124 height: 100% 125 } 126 127 59.94444443% { 128 bottom: 0; 129 height: 0 130 } 131/* 91.6666667%{bottom:0;height:0%;} */ 132} 133 134@keyframes load4 { 135 0% { 136 top: 0; 137 height: 0 138 } 139 140 6.944444444% { 141 top: 0; 142 height: 100% 143 } 144 145 50% { 146 bottom: 0; 147 height: 100% 148 } 149 150 59.94444443% { 151 bottom: 0; 152 height: 0 153 } 154/* 91.6666667%{bottom:0;height:0%;} */ 155} 156 157@keyframes load5 { 158 0% { 159 bottom: 0; 160 height: 0 161 } 162 163 6.944444444% { 164 bottom: 0; 165 height: 100% 166 } 167 168 50% { 169 top: 0; 170 height: 100% 171 } 172 173 59.94444443% { 174 top: 0; 175 height: 0 176 } 177/* 91.6666667%{top:0;height:0%;} */ 178} 179 180@keyframes load6 { 181 0% { 182 bottom: 0; 183 height: 0 184 } 185 186 6.944444444% { 187 bottom: 0; 188 height: 100% 189 } 190 191 50% { 192 top: 0; 193 height: 100% 194 } 195 196 59.94444443% { 197 top: 0; 198 height: 0 199 } 200/* 91.6666667%{top:0;height:0%;} */ 201} 202 203
748 views
748 views
MIT License