Loader by StealthWorm
#212121
1.loader { 2 margin: 0 auto; 3 display: flex; 4 width: 12rem; 5 height: 12rem; 6 justify-content: center; 7 align-items: center; 8 flex-direction: column; 9 overflow: hidden; 10 position: relative; 11 border-radius: 50%; 12 border: 0.4rem solid #52c5ff; 13} 14 15.container[class*="1"] { 16 animation-delay: 1s; 17} 18 19.container[class*="2"] { 20 animation-delay: 1.3s; 21} 22 23.container[class*="3"] { 24 animation-delay: 1.6s; 25} 26 27.container[class*="4"] { 28 animation-delay: 1.9s; 29} 30 31.tars { 32 z-index: 0; 33 position: absolute; 34 height: 100px; 35 width: 130px; 36 display: grid; 37 grid-template-columns: repeat(4, 1fr); 38 transform-style: preserve-3d; 39 animation: rotateX3D 6s ease-in-out infinite; 40 animation-delay: 1s; 41} 42 43.container { 44 position: relative; 45 display: flex; 46 width: 100%; 47 height: 100%; 48 transform-style: preserve-3d; 49 animation: rotateY3D 3s ease-in infinite both; 50} 51 52.shape { 53 width: 100%; 54 height: 100%; 55 transform-style: preserve-3d; 56 position: relative; 57 z-index: -1; 58} 59 60.shape div { 61 display: block; 62 position: absolute; 63 text-align: center; 64} 65 66.container:nth-child(2) .f::after, 67.container:nth-child(3) .f::after { 68 position: absolute; 69 content: ''; 70 width: 100%; 71 z-index: -1; 72 height: 20px; 73 background-image: radial-gradient(#54ff6e 2px, transparent 1%); 74 background-size: 20px 5px; 75 left: 0; 76 top: 20%; 77 border: 0; 78 animation: animMove 2s linear infinite alternate-reverse; 79 overflow: hidden; 80} 81 82.container:nth-child(2) .f::before, 83.container:nth-child(3) .f::before { 84 position: absolute; 85 content: ''; 86 width: 85%; 87 z-index: -1; 88 height: 20px; 89 left: 0; 90 top: 20%; 91 border: 0; 92 background: #181818; 93 border: 2px solid #52c5ff; 94 overflow: hidden; 95} 96 97.container:nth-child(1), 98.container:nth-child(4) { 99 & .f: :before, 100 & .r::before, 101 & .l::before { 102 position: absolute; 103 content: ''; 104 width: 95%; 105 height: 5px; 106 left: 0; 107 top: 25%; 108 border: 1px solid #52c5ff; 109 overflow: hidden; 110} 111} 112 113.container:nth-child(1) .b::before, 114.container:nth-child(4) .b::before { 115 position: absolute; 116 content: ''; 117 width: 95%; 118 z-index: -1; 119 height: 5px; 120 left: 0; 121 top: 69%; 122 border: 0; 123 border: 1px solid #52c5ff; 124 overflow: hidden; 125} 126 127.f { 128 transform: rotateY(0deg) translateZ(15px); 129 border-radius: 2px; 130 overflow: hidden; 131 transform-style: preserve-3d; 132} 133 134.b { 135 transform: rotateX(180deg) translateZ(15px); 136 border-radius: 2px; 137} 138 139.f,.b { 140 width: 30px; 141 height: 100px; 142 background: #212121; 143 box-shadow: inset 0 0 0 2px #52c5ff; 144 border: 2px solid #52c5ff; 145} 146 147.l { 148 transform: rotateY(-90deg) translateZ(0px); 149 border-radius: 2px; 150} 151 152.r { 153 transform: rotateY(90deg) translateZ(-30px); 154 border-radius: 2px; 155} 156 157.l,.r { 158 width: 30px; 159 height: 100px; 160 left: 15px; 161 position: relative; 162 z-index: -1; 163 background: #212121; 164 box-shadow: inset 0 0 0 2px #52c5ff; 165 border: 2px solid #52c5ff; 166} 167 168.t { 169 transform: rotateX(90deg) translateZ(40px); 170 border-radius: 2px; 171} 172 173.bot { 174 transform: rotateX(-90deg) translateZ(60px); 175 border-radius: 2px; 176} 177 178.t,.bot { 179 width: 30px; 180 height: 30px; 181 top: 25px; 182 position: relative; 183 z-index: -1; 184 background: #212121; 185 box-shadow: inset 0 0 0 2px #52c5ff; 186 border: 2px solid #52c5ff; 187} 188 189@keyframes rotateY3D { 190 0% { 191 transform: translateZ(0px) rotateX(0); 192 } 193 194 50% { 195 transform: translateZ(0px) rotateX(-360deg); 196 } 197 198 100% { 199 transform: translateZ(0px) rotateX(-360deg); 200 } 201} 202 203@keyframes rotateX3D { 204 0% { 205 transform: translateX(0px) rotateY(0); 206 } 207 208 50% { 209 transform: translateX(0px) rotateY(180deg); 210 } 211 212 100% { 213 transform: translateX(0px) rotateY(360deg); 214 } 215} 216 217@keyframes animMove { 218 0% { 219 transform: translateX(20px); 220 } 221 222 100% { 223 transform: translateX(-10px); 224 } 225}
861 views
861 views
MIT License