Loader by lesimpleliott
#e8e8e8
1.loader__balls { 2 display: flex; 3 flex-direction: row; 4 justify-content: center; 5 align-items: center; 6 gap: 15px; 7} 8.loader__balls__group { 9 display: flex; 10 flex-direction: column; 11 justify-content: flex-end; 12 align-items: center; 13 position: relative; 14 height: 100px; 15 width: 40px; 16} 17.ball { 18 height: 30px; 19 width: 30px; 20 border-radius: 15px; 21 position: absolute; 22 transform-origin: bottom; 23} 24 25/* ANIMATION BALL 1*/ 26.loader__balls__group :nth-child(1) { 27 background-color: #99e2d0; 28 animation-name: jumpinBallAnimation1; 29 animation-duration: 1000ms; 30 animation-iteration-count: infinite; 31} 32@keyframes jumpinBallAnimation1 { 33 0% { 34 transform: translateY(0) scale(1, 1); 35 } 36 10% { 37 transform: translateY(0) scale(1.3, 0.8); 38 } 39 11% { 40 transform: translateY(0) scale(0.7, 1.2); 41 animation-timing-function: cubic-bezier(0, 0, 0.5, 1); 42 } 43 39% { 44 transform: translateY(-75px) scale(1); 45 animation-timing-function: cubic-bezier(0, 0, 0.5, 1); 46 } 47 40% { 48 transform: translateY(-75px) scale(1); 49 } 50 41% { 51 transform: translateY(-75px) scale(1); 52 animation-timing-function: cubic-bezier(1, 0, 1, 0); 53 } 54 69% { 55 transform: translateY(0px) scale(1, 1); 56 animation-timing-function: cubic-bezier(1, 0, 1, 0); 57 } 58 70% { 59 transform: translateY(0) scale(1.5, 0.4); 60 } 61 80% { 62 transform: translateY(0) scale(0.8, 1.2); 63 } 64 90% { 65 transform: translateY(0) scale(1.1, 0.8); 66 } 67 100% { 68 transform: translateY(0) scale(1, 1); 69 } 70} 71 72/* ANIMATION BALL 2*/ 73.loader__balls__group :nth-child(2) { 74 background-color: #ff79da; 75 animation-name: jumpinBallAnimation2; 76 animation-duration: 1000ms; 77 animation-iteration-count: infinite; 78} 79@keyframes jumpinBallAnimation2 { 80 0% { 81 transform: translateY(0) scale(1, 1); 82 } 83 10% { 84 transform: translateY(0) scale(1.3, 0.8); 85 } 86 11% { 87 transform: translateY(0) scale(0.7, 1.2); 88 animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); 89 } 90 39% { 91 transform: translateY(-75px) scale(1); 92 animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); 93 } 94 40% { 95 transform: translateY(-75px) scale(1); 96 } 97 41% { 98 transform: translateY(-75px) scale(1); 99 animation-timing-function: cubic-bezier(1, 0, 1, 0.5); 100 } 101 69% { 102 transform: translateY(0px) scale(1, 1); 103 animation-timing-function: cubic-bezier(1, 0, 1, 0.5); 104 } 105 70% { 106 transform: translateY(0) scale(1.5, 0.4); 107 } 108 80% { 109 transform: translateY(0) scale(0.8, 1.2); 110 } 111 90% { 112 transform: translateY(0) scale(1.1, 0.8); 113 } 114 100% { 115 transform: translateY(0) scale(1, 1); 116 } 117} 118 119/* ANIMATION BALL 3*/ 120.loader__balls__group :nth-child(3) { 121 background-color: #9356dc; 122 animation-name: jumpinBallAnimation3; 123 animation-duration: 1000ms; 124 animation-iteration-count: infinite; 125} 126@keyframes jumpinBallAnimation3 { 127 0% { 128 transform: translateY(0) scale(1, 1); 129 } 130 10% { 131 transform: translateY(0) scale(1.3, 0.8); 132 } 133 11% { 134 transform: translateY(0) scale(0.7, 1.2); 135 animation-timing-function: cubic-bezier(0, 1, 0.5, 1); 136 } 137 39% { 138 transform: translateY(-75px) scale(1); 139 animation-timing-function: cubic-bezier(0, 1, 0.5, 1); 140 } 141 40% { 142 transform: translateY(-75px) scale(1); 143 } 144 41% { 145 transform: translateY(-75px) scale(1); 146 animation-timing-function: cubic-bezier(1, 0, 1, 1); 147 } 148 69% { 149 transform: translateY(0px) scale(1, 1); 150 animation-timing-function: cubic-bezier(1, 0, 1, 1); 151 } 152 70% { 153 transform: translateY(0) scale(1.5, 0.4); 154 } 155 80% { 156 transform: translateY(0) scale(0.8, 1.2); 157 } 158 90% { 159 transform: translateY(0) scale(1.1, 0.8); 160 } 161 100% { 162 transform: translateY(0) scale(1, 1); 163 } 164} 165.loader__balls__group .item1 { 166 animation-delay: 0ms; 167} 168.loader__balls__group .item2 { 169 animation-delay: 100ms; 170} 171.loader__balls__group .item3 { 172 animation-delay: 200ms; 173} 174
415 views
415 views
MIT License