Loader by abrahamcalsin
#e8e8e8
1.loaderRectangle { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 gap: 0 3px; 6} 7 8.loaderRectangle div { 9 width: 10px; 10 height: 16px; 11 animation: .9s ease-in-out infinite; 12 background: #183153; 13 box-shadow: 0 0 20px rgba(18, 31, 53, 0.3); 14} 15 16.loaderRectangle div:nth-child(1) { 17 animation-name: rectangleOneAnim; 18 animation-delay: 1s; 19} 20 21@keyframes rectangleOneAnim { 22 0% { 23 height: 15px; 24 } 25 26 40% { 27 height: 30px; 28 } 29 30 100% { 31 height: 15px; 32 } 33} 34 35.loaderRectangle div:nth-child(2) { 36 animation-name: rectangleTwoAnim; 37 animation-delay: 1.1s; 38} 39 40@keyframes rectangleTwoAnim { 41 0% { 42 height: 15px; 43 } 44 45 40% { 46 height: 40px; 47 } 48 49 100% { 50 height: 15px; 51 } 52} 53 54.loaderRectangle div:nth-child(3) { 55 animation-name: rectangleThreeAnim; 56 animation-delay: 1.2s; 57} 58 59@keyframes rectangleThreeAnim { 60 0% { 61 height: 15px; 62 } 63 64 40% { 65 height: 50px; 66 } 67 68 100% { 69 height: 15px; 70 } 71} 72 73.loaderRectangle div:nth-child(4) { 74 animation-name: rectangleFourAnim; 75 animation-delay: 1.3s; 76} 77 78@keyframes rectangleFourAnim { 79 0% { 80 height: 15px; 81 } 82 83 40% { 84 height: 40px; 85 } 86 87 100% { 88 height: 15px; 89 } 90} 91 92.loaderRectangle div:nth-child(5) { 93 animation-name: rectangleFiveAnim; 94 animation-delay: 1.4s; 95} 96 97@keyframes rectangleFiveAnim { 98 0% { 99 height: 15px; 100 } 101 102 40% { 103 height: 30px; 104 } 105 106 100% { 107 height: 15px; 108 } 109}
1.6K views
1.6K views
MIT License