#212121
1.spinner { 2 position: relative; 3 width: 60px; 4 height: 60px; 5 display: flex; 6 justify-content: center; 7 align-items: center; 8 border-radius: 50%; 9 margin-left: -75px; 10} 11 12.spinner span { 13 position: absolute; 14 top: 50%; 15 left: var(--left); 16 width: 35px; 17 height: 7px; 18 background: #ffff; 19 animation: dominos 1s ease infinite; 20 box-shadow: 2px 2px 3px 0px black; 21} 22 23.spinner span:nth-child(1) { 24 --left: 80px; 25 animation-delay: 0.125s; 26} 27 28.spinner span:nth-child(2) { 29 --left: 70px; 30 animation-delay: 0.3s; 31} 32 33.spinner span:nth-child(3) { 34 left: 60px; 35 animation-delay: 0.425s; 36} 37 38.spinner span:nth-child(4) { 39 animation-delay: 0.54s; 40 left: 50px; 41} 42 43.spinner span:nth-child(5) { 44 animation-delay: 0.665s; 45 left: 40px; 46} 47 48.spinner span:nth-child(6) { 49 animation-delay: 0.79s; 50 left: 30px; 51} 52 53.spinner span:nth-child(7) { 54 animation-delay: 0.915s; 55 left: 20px; 56} 57 58.spinner span:nth-child(8) { 59 left: 10px; 60} 61 62@keyframes dominos { 63 50% { 64 opacity: 0.7; 65 } 66 67 75% { 68 -webkit-transform: rotate(90deg); 69 transform: rotate(90deg); 70 } 71 72 80% { 73 opacity: 1; 74 } 75} 76
Comments
MIT License