Loader by BUGHERE
#e8e8e8
1.loader { 2 display: flex; 3 position: relative; 4 justify-items: center; 5 align-items: center; 6 gap: 1rem; 7 height: 55px; 8 width: 200px; 9 overflow: hidden; 10} 11 12.container { 13 width: 100%; 14 display: flex; 15 flex-direction: column; 16 height: 200px; 17 position: relative; 18 align-items: center; 19} 20 21.carousel { 22 display: flex; 23 gap: 1rem; 24 flex-direction: column; 25 position: absolute; 26 width: 100%; 27 transform-origin: center; 28 animation-delay: 2s; 29} 30 31.loader .container:nth-child(3) { 32 justify-content: flex-start; 33 justify-items: flex-start; 34 animation: scroll-up 4s infinite ease-in-out; 35 animation-delay: 3s; 36} 37 38.loader .container:nth-child(2) { 39 justify-content: flex-end; 40 justify-items: flex-end; 41 animation: scroll-down 4s infinite ease-in-out; 42 animation-delay: 3s; 43} 44 45.loader .container:nth-child(1) { 46 justify-content: flex-end; 47 justify-items: flex-end; 48 animation: scroll-down 3s infinite ease-in-out; 49 animation-delay: 3s; 50} 51 52.love { 53 background: black; 54 display: flex; 55 width: 30px; 56 height: 30px; 57 position: relative; 58 align-items: center; 59 justify-content: center; 60 left: 8px; 61 margin: 0.8rem 4px; 62 transform: rotate(45deg); 63 animation-delay: 2s; 64} 65 66.love::before, 67.love::after { 68 content: ""; 69 position: absolute; 70 width: 30px; 71 height: 30px; 72 border-radius: 50%; 73 background: darkred; 74} 75 76.love::before { 77 left: -16px; 78} 79 80.love::after { 81 top: -16px; 82} 83 84.death { 85 display: flex; 86 width: 100%; 87 height: 55px; 88 position: relative; 89 align-items: center; 90 justify-content: center; 91 animation: rotation 3s infinite ease-in-out; 92 animation-delay: 1s; 93} 94 95.death:after { 96 content: ""; 97 height: 63px; 98 position: absolute; 99 border-left: 12px solid black; 100 transform: rotate(45deg); 101 border-radius: 8px; 102 top: -4px; 103} 104 105.death:before { 106 content: ""; 107 height: 60px; 108 position: absolute; 109 border-left: 12px solid darkred; 110 transform: rotate(-45deg); 111} 112 113.loader:hover { 114 animation: none; 115} 116 117.robots { 118 display: flex; 119 width: 100%; 120 height: 55px; 121 justify-content: space-between; 122 background-color: black; 123 border-radius: 0 8px 8px; 124 padding: 8px; 125 animation-delay: 5s; 126} 127 128.robots::after { 129 content: ""; 130 width: 12px; 131 height: 12px; 132 top: 0; 133 left: 0; 134 background-color: darkred; 135 border-radius: 50%; 136 animation-delay: 2s; 137 animation: blink 0.5s 2 forwards; 138} 139 140.robots::before { 141 content: ""; 142 width: 12px; 143 height: 12px; 144 top: 0; 145 left: 0; 146 background-color: darkred; 147 border-radius: 50%; 148 animation-delay: 2s; 149 animation: blink 0.5s 2 forwards; 150} 151 152@keyframes scroll-up { 153 0% { 154 transform: translateY(0); 155 filter: blur(0); 156 } 157 158 30% { 159 transform: translateY(-150%); 160 filter: blur(10px); 161 } 162 163 60% { 164 transform: translateY(0); 165 filter: blur(0px); 166 } 167} 168 169@keyframes scroll-down { 170 0% { 171 transform: translateY(0); 172 filter: blur(0); 173 } 174 175 30% { 176 transform: translateY(150%); 177 filter: blur(10px); 178 } 179 180 60% { 181 transform: translateY(0); 182 filter: blur(0px); 183 } 184} 185 186@keyframes rotation { 187 20%, 188 100% { 189 transform: rotate(180deg); 190 } 191} 192 193@keyframes blink { 194 0% { 195 height: 0; 196 } 197 198 20% { 199 height: 12px; 200 } 201 202 100% { 203 height: 12px; 204 } 205} 206
231 views
Variation of aloader
MIT License