#212121
1.loader { 2 --cell-size: 52px; 3 --cell-spacing: 1px; 4 --cells: 3; 5 --total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing))); 6 display: flex; 7 flex-wrap: wrap; 8 width: var(--total-size); 9 height: var(--total-size); 10} 11 12.cell { 13 flex: 0 0 var(--cell-size); 14 margin: var(--cell-spacing); 15 background-color: transparent; 16 box-sizing: border-box; 17 border-radius: 4px; 18 animation: 1.5s ripple ease infinite; 19} 20 21.cell.d-1 { 22 animation-delay: 100ms; 23} 24 25.cell.d-2 { 26 animation-delay: 200ms; 27} 28 29.cell.d-3 { 30 animation-delay: 300ms; 31} 32 33.cell.d-4 { 34 animation-delay: 400ms; 35} 36 37.cell:nth-child(1) { 38 --cell-color: #00FF87; 39} 40 41.cell:nth-child(2) { 42 --cell-color: #0CFD95; 43} 44 45.cell:nth-child(3) { 46 --cell-color: #17FBA2; 47} 48 49.cell:nth-child(4) { 50 --cell-color: #23F9B2; 51} 52 53.cell:nth-child(5) { 54 --cell-color: #30F7C3; 55} 56 57.cell:nth-child(6) { 58 --cell-color: #3DF5D4; 59} 60 61.cell:nth-child(7) { 62 --cell-color: #45F4DE; 63} 64 65.cell:nth-child(8) { 66 --cell-color: #53F1F0; 67} 68 69.cell:nth-child(9) { 70 --cell-color: #60EFFF; 71} 72 73/*Animation*/ 74@keyframes ripple { 75 0% { 76 background-color: transparent; 77 } 78 79 30% { 80 background-color: var(--cell-color); 81 } 82 83 60% { 84 background-color: transparent; 85 } 86 87 100% { 88 background-color: transparent; 89 } 90}
Comments
1sahilxkhadka 7. August at 16:36
7. August at 16:36
good one brother
MIT License