Loader by carlosepcc
#212121
1.loader { 2 display: flex; 3 width: 8rem; 4 height: 8rem; 5 justify-items: center; 6 justify-content: center; 7 align-items: center; 8} 9 10.head { 11 width: 100%; 12 height: 100%; 13 background-color: #FA95FB; 14 border-radius: 50%; 15 animation: move 3s linear infinite; 16 box-shadow: 0 1rem 1rem #E220B8; 17 filter: blur(.3rem); 18 z-index: 1; 19} 20 21.eye { 22 display: flex; 23 position: absolute; 24 width: 4rem; 25 height: 4rem; 26 background-color: #EFFFC8; 27 background: radial-gradient(rgba(255,247,247,1) 20%, rgba(255,170,197,1) 100%); 28 border-radius: 50%; 29 align-items: center; 30 justify-content: center; 31 z-index: 2; 32 box-shadow: 0 0 1rem #F752F7; 33 animation: move 5s alternate infinite; 34} 35 36.eye::before { 37 content: ""; 38 display: flex; 39 width: 1rem; 40 height: 2rem; 41 background-color: #000; 42 background: radial-gradient(rgba(0,0,0,1) 44%, #E220B8 50%, transparent 60%); 43 border-radius: 50%; 44 animation: blink 4s ease-in-out alternate infinite; 45} 46 47.flames { 48 display: flex; 49 position: absolute; 50 z-index: 0; 51} 52 53.particle { 54 display: flex; 55 position: absolute; 56 background-color: #FA95FB; 57 border-radius: 50%; 58 filter: blur(.3rem); 59 border-top: 5px solid #E220B8; 60 border-left: 5px solid #E220B8; 61} 62 63.flames::before { 64 content: ""; 65 position: absolute; 66 width: 8rem; 67 height: 8rem; 68 background: #f865d8; 69 filter: blur(5rem); 70 opacity: 0.5; 71 border-radius: 50%; 72 top: -8rem; 73 left: -4rem; 74 z-index: 4; 75 animation: pulse 3s linear infinite; 76} 77 78.particle:nth-child(1) { 79 width: 4rem; 80 height: 4rem; 81 top: -6rem; 82 animation: move 7s alternate-reverse infinite; 83} 84 85.particle:nth-child(2) { 86 width: 1.5rem; 87 height: 1.5rem; 88 top: -8rem; 89 left: -5rem; 90 animation: move 1.5s ease-in-out reverse infinite; 91} 92 93.particle:nth-child(3) { 94 width: 4rem; 95 height: 4rem; 96 top: -5rem; 97 left: -4rem; 98 animation: move 8s alternate-reverse infinite; 99} 100 101.particle:nth-child(4) { 102 width: 3rem; 103 height: 3rem; 104 top: -7.5rem; 105 animation: move 4s alternate-reverse infinite; 106} 107 108.particle:nth-child(5) { 109 width: 2rem; 110 height: 2rem; 111 top: -9rem; 112 left: 1rem; 113 animation: move 2.5s alternate-reverse infinite; 114} 115 116.particle:nth-child(6) { 117 width: 2rem; 118 height: 2rem; 119 top: -6.8rem; 120 left: -1.5rem; 121 animation: move 5s alternate-reverse infinite; 122} 123 124.particle:nth-child(7) { 125 width: 1rem; 126 height: 1rem; 127 top: -10rem; 128 left: -1rem; 129 animation: move 1.2s alternate-reverse infinite; 130} 131 132.particle:nth-child(8) { 133 width: 1.3rem; 134 height: 1.3rem; 135 top: -7.5rem; 136 left: -2rem; 137 animation: move 2.5s alternate-reverse infinite; 138} 139 140@keyframes move { 141 0% { 142 transform: translate(0, 0); 143 } 144 145 50% { 146 transform: translate(4px, 6px); 147 } 148 149 100% { 150 transform: translate(0, 0); 151 } 152} 153 154@keyframes blink { 155 20% { 156 transform: translate(0, 0); 157 height: 2rem; 158 } 159 160 30% { 161 height: 0; 162 } 163 164 40% { 165 transform: translate(5px, 10px); 166 height: 0; 167 } 168 169 50% { 170 height: 2rem; 171 } 172 173 70% { 174 transform: translate(-10px, -10px); 175 } 176 177 90% { 178 transform: translate(0, 0); 179 } 180} 181 182@keyframes pulse { 183 0% { 184 opacity: 0.5; 185 } 186 187 50% { 188 opacity: 1; 189 } 190 191 100% { 192 opacity: 0.5; 193 } 194} 195
443 views
Variation of aloader
MIT License