#212121
1.loading-wave { 2 width: 300px; 3 height: 100px; 4 display: flex; 5 justify-content: center; 6 align-items: flex-end; 7} 8 9.loading-bar { 10 width: 20px; 11 height: 10px; 12 margin: 0 5px; 13 background-color: #3498db; 14 border-radius: 5px; 15 animation: loading-wave-animation 1s ease-in-out infinite; 16} 17 18.loading-bar:nth-child(2) { 19 animation-delay: 0.1s; 20} 21 22.loading-bar:nth-child(3) { 23 animation-delay: 0.2s; 24} 25 26.loading-bar:nth-child(4) { 27 animation-delay: 0.3s; 28} 29 30@keyframes loading-wave-animation { 31 0% { 32 height: 10px; 33 } 34 35 50% { 36 height: 50px; 37 } 38 39 100% { 40 height: 10px; 41 } 42} 43
3.9K views
3.9K views
Comments
1Abdalrazaq3 24. October at 18:49
24. October at 18:49
Qhshsbs
MIT License