#e8e8e8
1.dot-wave { 2 --uib-size: 50px; 3 --uib-speed: 0.6s; 4 --uib-color: #0d0909; 5 display: flex; 6 flex-flow: row nowrap; 7 align-items: center; 8 justify-content: space-between; 9 width: var(--uib-size); 10 height: calc(var(--uib-size) * 0.17); 11 padding-top: calc(var(--uib-size) * 0.34); 12} 13 14.dot-wave__dot { 15 flex-shrink: 0; 16 width: calc(var(--uib-size) * 0.17); 17 height: calc(var(--uib-size) * 0.17); 18 border-radius: 50%; 19 background-color: var(--uib-color); 20 will-change: transform; 21} 22 23.dot-wave__dot:nth-child(1) { 24 animation: jump824 var(--uib-speed) ease-in-out 25 calc(var(--uib-speed) * -0.45) infinite; 26} 27 28.dot-wave__dot:nth-child(2) { 29 animation: jump824 var(--uib-speed) ease-in-out 30 calc(var(--uib-speed) * -0.3) infinite; 31} 32 33.dot-wave__dot:nth-child(3) { 34 animation: jump824 var(--uib-speed) ease-in-out 35 calc(var(--uib-speed) * -0.15) infinite; 36} 37 38.dot-wave__dot:nth-child(4) { 39 animation: jump824 var(--uib-speed) ease-in-out infinite; 40} 41 42@keyframes jump824 { 43 0%, 44 100% { 45 transform: translateY(0px); 46 } 47 48 50% { 49 transform: translateY(-200%); 50 } 51} 52
1.1K views
1.1K views
Comments
MIT License