Loader by SmookyDev
#212121
1.center_div { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 margin: 5px; 6} 7 8.wave { 9 width: 1.8rem; 10 height: 150px; 11 background-color: #ff6b6b; 12 margin: 0 4px; 13 border-radius: 0.4rem; 14 animation: wave 1.5s linear infinite; 15 transform-origin: center; 16} 17 18@keyframes wave { 19 0% { 20 transform: scale(0); 21 filter: hue-rotate(90deg) blur(100px); 22 } 23 25% { 24 transform: scale(0); 25 filter: hue-rotate(120deg) blur(50px); 26 } 27 50% { 28 transform: scale(1); 29 filter: hue-rotate(180deg) blur(25px); 30 } 31 25% { 32 transform: scale(0); 33 filter: hue-rotate(360deg) blur(2px); 34 } 35 100% { 36 transform: scale(0); 37 filter: hue-rotate(0deg) blur(0); 38 } 39} 40 41.wave:nth-child(2) { 42 animation-delay: 0.1s; 43} 44 45.wave:nth-child(3) { 46 animation-delay: 0.2s; 47} 48 49.wave:nth-child(4) { 50 animation-delay: 0.3s; 51} 52 53.wave:nth-child(5) { 54 animation-delay: 0.4s; 55} 56 57.wave:nth-child(6) { 58 animation-delay: 0.5s; 59} 60 61.wave:nth-child(7) { 62 animation-delay: 0.6s; 63} 64 65.wave:nth-child(8) { 66 animation-delay: 0.7s; 67} 68 69.wave:nth-child(9) { 70 animation-delay: 0.8s; 71} 72 73.wave:nth-child(10) { 74 animation-delay: 0.9s; 75} 76
555 views
555 views
MIT License