ФАЙЛ HTML:

ФАЙЛ CSS: .dots-1 { height: 15px; aspect-ratio: 4; display: grid; animation: d1-0 1s infinite; } .dots-1:before, .dots-1:after { content: ""; grid-area: 1/1; --_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000); background: var(--_g) left, var(--_g) right; background-size: 25% 100%; } .dots-1:after { transform: rotate(0) translate(37.5%) rotate(0); animation: inherit; animation-name: d1-1; } @keyframes d1-0 { 100% {transform:translate(37.5%)} } @keyframes d1-1 { 100% {transform:rotate(-.5turn) translate(37.5%) rotate(.5turn)} } .dots-2 { height: 15px; aspect-ratio: 5; display: grid; --_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000); } .dots-2:before, .dots-2:after { content: ""; grid-area: 1/1; background: var(--_g) left, var(--_g) right; background-size: 20% 100%; animation: d2 1s infinite; } .dots-2:after { background: var(--_g) calc(1*100%/3), var(--_g) calc(2*100%/3); background-size: 20% 100%; animation-direction: reverse; } @keyframes d2 { 80%,100% {transform:rotate(.5turn)} } .dots-3 { height: 15px; aspect-ratio: 5; display: flex; justify-content: space-between; } .dots-3:before, .dots-3:after { content: ""; width: calc(140%/3); --_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000); background: var(--_g) left, var(--_g) right; background-size: calc(300%/7) 100%; transform-origin: calc(300%/14) 50%; transform: translate(0) rotate(0); animation: d3 1s infinite linear; } .dots-3:after { --s:-1; transform-origin: calc(100% - calc(300%/14)) 50%; } @keyframes d3 { 100% {transform: translate(calc(var(--s,1)*(100% - calc(300%/7)))) rotate(calc(var(--s,1)*.5turn))} } .dots-4 { height: 15px; aspect-ratio: 4; display: grid; } .dots-4:before, .dots-4:after { content: ""; grid-area: 1/1; --_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000); background: var(--_g) left, var(--_g) right; background-size: 25% 100%; animation: d4 1s infinite; transform: translate(var(--d,0)) rotate(0); } .dots-4:after { --d: 37.5%; animation-delay: .5s; } @keyframes d4 { 50%,100% {transform: translate(var(--d,0)) rotate(.5turn)} } .dots-5 { height: 15px; aspect-ratio: 5; display: grid; } .dots-5:before, .dots-5:after { content: ""; grid-area: 1/1; height: inherit; --_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000); background: var(--_g) left, var(--_g) right; background-size: 15px 100%; background-repeat: no-repeat; animation: d5 1s infinite linear; } .dots-5:after { margin-left: auto; --s:-1; } @keyframes d5 { 0% {transform:translateY(calc(var(--s,1)*0px));aspect-ratio: 2.3 } 33% {transform:translateY(calc(var(--s,1)*8px));aspect-ratio: 2.3 } 66% {transform:translateY(calc(var(--s,1)*8px));aspect-ratio: 3.7 } 100% {transform:translateY(calc(var(--s,1)*0px));aspect-ratio: 3.7 } } .dots-6 { height: 15px; aspect-ratio: 5; display: grid; animation: d6-0 2s infinite linear; } .dots-6:before, .dots-6:after { content: ""; grid-area: 1/1; height: inherit; --_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000); background: var(--_g) left, var(--_g) right; background-size: 15px 100%; background-repeat: no-repeat; animation: d6-1 1s infinite linear; } .dots-6:after { margin-left: auto; --s:-1; } @keyframes d6-0 { 0%,49.99% {transform: scaleY( 1)} 50%,100% {transform: scaleY(-1)} } @keyframes d6-1 { 0% {transform:translate(0 ,calc(var(--s,1)*0px));aspect-ratio: 2.3} 33% {transform:translate(0 ,calc(var(--s,1)*8px));aspect-ratio: 2.3} 66% {transform:translate(calc(var(--s,1)*19px),calc(var(--s,1)*8px));aspect-ratio: 3.7} 100% {transform:translate(calc(var(--s,1)*19px),calc(var(--s,1)*0px));aspect-ratio: 3.7} } /**/ body { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); grid-auto-rows: 130px; place-items:center; } * { box-sizing: border-box; }