<div class="dots-1"></div>
<div class="dots-2"></div>
<div class="dots-3"></div>
<div class="dots-4"></div>
<div class="dots-5"></div>
<div class="dots-6"></div>
<div class="dots-7"></div>
<div class="dots-8"></div>
<div class="dots-9"></div>
<div class="dots-10"></div>

.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}
}


.dots-7 {
  width: 6px;
  aspect-ratio: 1;
  border-radius: 50%; 
  animation:
    d7-1 .75s infinite linear alternate,
    d7-2 1.5s  infinite linear; 
}

@keyframes d7-1 {
  0%,
  20% {box-shadow:30px 0 0 3px, 10px 0 0 3px, -10px 0 0 3px,-30px 0 0 3px}
  60%,
  100% {box-shadow:12px 0 0 3px, 14px 0 0 6px, -14px 0 0 6px,-12px 0 0 3px}
}

@keyframes d7-2 {
  0%,25%   {transform: rotate(0)}
  50%,100% {transform: rotate(.5turn)}
}

.dots-8 {
  width: 35px;
  aspect-ratio: 1;
  --_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000);
  background:
    var(--_g) 0    0,
    var(--_g) 100% 0,
    var(--_g) 100% 100%,
    var(--_g) 0    100%;
  background-size: 40% 40%;
  animation: d8 .5s infinite; 
}

@keyframes d8 {
  100% {background-position: 100% 0,100% 100%,0 100%,0 0}
}


.dots-9 {
  height: 15px;
  aspect-ratio: 5;
  display: grid;
  animation: d9-0 1s infinite linear; 
}
.dots-9:before,
.dots-9:after {
  content: "";
  width: calc(140%/3);
  grid-area: 1/1;
  --_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000);
  background:
    var(--_g) left,
    var(--_g) right;
  background-size: calc(300%/7) 100%;
  animation: d9-1 1s infinite linear; 
}
.dots-9:after {
  margin-left: auto;
  --s:-1;
}

@keyframes d9-0 {
  0%,30% {transform: rotate(0)}
  50%,100%   {transform: rotate(.5turn)}
}

@keyframes d9-1 {
  30%,70% {transform:translate(calc(var(--s,1)*400%/14))}
}


.dots-10 {
  height: 15px;
  aspect-ratio: 5;
  --_g:no-repeat radial-gradient(farthest-side,#000 94%,#0000);
  background: var(--_g),var(--_g),var(--_g),var(--_g);
  background-size: 20% 100%;
  animation:
    d10-1 .75s infinite alternate,
    d10-2 1.5s infinite alternate; 
}

@keyframes d10-1 {
  0%,
  10% {background-position: 0 0,0 0,0 0,0 0}
  33% {background-position: 0 0,calc(100%/3) 0,calc(100%/3) 0,calc(100%/3) 0}
  66% {background-position: 0 0,calc(100%/3) 0,calc(2*100%/3) 0,calc(2*100%/3) 0}
  90%,
  100% {background-position: 0 0,calc(100%/3) 0,calc(2*100%/3) 0,100% 0}
}

@keyframes d10-2 {
  0%,49.99% {transform: scale( 1)}
  50%,100%  {transform: scale(-1)}
}


/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}