1.1K views
CSSAdd prefixes
1.spinner { 2 --clr: rgb(0, 113, 128); 3 --gap: 6px; 4 /* gap between each circle */ 5 width: 100px; 6 height: 100px; 7 display: flex; 8 justify-content: center; 9 align-items: center; 10 gap: var(--gap); 11} 12 13.spinner span { 14 width: 20px; 15 height: 20px; 16 border-radius: 100%; 17 background-color: var(--clr); 18 opacity: 0; 19} 20 21.spinner span:nth-child(1) { 22 animation: fade 1s ease-in-out infinite; 23} 24 25.spinner span:nth-child(2) { 26 animation: fade 1s ease-in-out 0.33s infinite; 27} 28 29.spinner span:nth-child(3) { 30 animation: fade 1s ease-in-out 0.66s infinite; 31} 32 33@keyframes fade { 34 0%, 100% { 35 opacity: 1; 36 } 37 38 60% { 39 opacity: 0; 40 } 41} 42
HTML
1<div class="spinner"> 2 <span></span> 3 <span></span> 4 <span></span> 5</div>