#container { --n:7; /* number of item */ --d:12s; /* duration */ width: 200px; height: 200px; margin: 40px auto; border: 1px solid #000; display:grid; grid-template-columns:30px; grid-template-rows:30px; place-content: center; border-radius: 50%; } .item { grid-area:1/1; line-height: 30px; text-align: center; border-radius: 50%; background: #f00; animation: spin var(--d) linear infinite; transform:rotate(0) translate(100px) rotate(0); } @keyframes spin { 100% { transform:rotate(1turn) translate(100px) rotate(-1turn); } } .item:nth-child(1) {animation-delay:calc(-0*var(--d)/var(--n))} .item:nth-child(2) {animation-delay:calc(-1*var(--d)/var(--n))} .item:nth-child(3) {animation-delay:calc(-2*var(--d)/var(--n))} .item:nth-child(4) {animation-delay:calc(-3*var(--d)/var(--n))} .item:nth-child(5) {animation-delay:calc(-4*var(--d)/var(--n))} .item:nth-child(6) {animation-delay:calc(-5*var(--d)/var(--n))} .item:nth-child(7) {animation-delay:calc(-6*var(--d)/var(--n))} .item:nth-child(8) {animation-delay:calc(-7*var(--d)/var(--n))} .item:nth-child(9) {animation-delay:calc(-8*var(--d)/var(--n))} /*.item:nth-child(N) {animation-delay:calc(-(N - 1)*var(--d)/var(--n))}*/
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter