#e8e8e8
1.loading { 2 --speed-of-animation: 0.9s; 3 --gap: 6px; 4 --first-color: #4c86f9; 5 --second-color: #49a84c; 6 --third-color: #f6bb02; 7 --fourth-color: #f6bb02; 8 --fifth-color: #2196f3; 9 display: flex; 10 justify-content: center; 11 align-items: center; 12 width: 100px; 13 gap: 6px; 14 height: 100px; 15} 16 17.loading span { 18 width: 4px; 19 height: 50px; 20 background: var(--first-color); 21 animation: scale var(--speed-of-animation) ease-in-out infinite; 22} 23 24.loading span:nth-child(2) { 25 background: var(--second-color); 26 animation-delay: -0.8s; 27} 28 29.loading span:nth-child(3) { 30 background: var(--third-color); 31 animation-delay: -0.7s; 32} 33 34.loading span:nth-child(4) { 35 background: var(--fourth-color); 36 animation-delay: -0.6s; 37} 38 39.loading span:nth-child(5) { 40 background: var(--fifth-color); 41 animation-delay: -0.5s; 42} 43 44@keyframes scale { 45 0%, 40%, 100% { 46 transform: scaleY(0.05); 47 } 48 49 20% { 50 transform: scaleY(1); 51 } 52}
7.3K views
7.3K views
Comments
MIT License