<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: 5;
  display: flex;
  justify-content: space-between;
  --_g: no-repeat radial-gradient(farthest-side,currentColor 95%,#0000);
  background:
    var(--_g) calc(1*100%/3) 0,
    var(--_g) calc(2*100%/3) 0;
  background-size: 20% 100%;
}

.dots-1:before,
.dots-1:after {
  content: "";
  height: inherit;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  animation: d1 1s infinite; 
}
.dots-1:after {
  --s:-1,-1;
}

@keyframes d1 {
  0%   {transform: scale(var(--s,1)) translate(0   ,0)}
  33%  {transform: scale(var(--s,1)) translate(0   ,130%)}
  66%  {transform: scale(var(--s,1)) translate(400%,130%)}
  100% {transform: scale(var(--s,1)) translate(400%,0)}
}

.dots-2 {
  height: 15px;
  aspect-ratio: 5;
  display: flex;
  justify-content: space-between;
  --_g: no-repeat radial-gradient(farthest-side,currentColor 95%,#0000);
  background: var(--_g),var(--_g);
  background-size: 20% 100%;
  animation: d2-0 1s infinite;
}
@keyframes d2-0 {
  0%,
  60%  {background-position: calc(1*100%/3) 0, calc(2*100%/3) 0}
  100% {background-position: calc(0*100%/3) 0, calc(3*100%/3) 0}
}

.dots-2:before,
.dots-2:after {
  content: "";
  height: inherit;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  animation: d2-1 1s infinite; 
}
.dots-2:after {
  --s:-1,-1;
}

@keyframes d2-1 {
  0%   {transform: scale(var(--s,1)) translate(0           ,0)}
  33%  {transform: scale(var(--s,1)) translate(0           ,130%)}
  66%  {transform: scale(var(--s,1)) translate(calc(400%/3),130%)}
  100% {transform: scale(var(--s,1)) translate(calc(400%/3),0)}
}

.dots-3 {
  height: 30px;
  aspect-ratio: 2.5;
  --_g: no-repeat radial-gradient(farthest-side,#000 90%,#0000);
  background:var(--_g), var(--_g), var(--_g), var(--_g);
  background-size: 20% 50%;
  animation:d3 1s infinite linear; 
}

@keyframes d3 {
  0%     {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  16.67% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  33.33% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  50%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
  66.67% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
  83.33% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
  100%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
}

.dots-4 {
  height: 30px;
  aspect-ratio: 2.5;
  --_g: no-repeat radial-gradient(farthest-side,#000 90%,#0000);
  background:var(--_g), var(--_g), var(--_g), var(--_g);
  background-size: 20% 50%;
  animation:d4 1s infinite linear alternate; 
}

@keyframes d4 {
  0%,
  5%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  12.5% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  25%   {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  37.5% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
  50%   {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 0   }
  62.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
  75%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  87.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
  95%,
  100%  {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
}

.dots-5 {
  --s: 28px;
  height: var(--s);
  aspect-ratio: 2.5;
  --_g: #000 90%,#0000;
  --_g0: no-repeat radial-gradient(farthest-side          ,var(--_g));
  --_g1: no-repeat radial-gradient(farthest-side at top   ,var(--_g));
  --_g2: no-repeat radial-gradient(farthest-side at bottom,var(--_g));
  background:var(--_g0), var(--_g1), var(--_g2), var(--_g0), var(--_g1), var(--_g2);
  background-size: 20% 50%,20% 25%,20% 25%;
  animation: d5 1s infinite; 
}

@keyframes d5 {
  0%   {background-position:calc(0*100%/3) 50%,calc(1*100%/3) calc(50% + calc(var(--s)/8)),calc(1*100%/3) calc(50% - calc(var(--s)/8)), calc(3*100%/3) 50%,calc(2*100%/3) calc(50% + calc(var(--s)/8)),calc(2*100%/3) calc(50% - calc(var(--s)/8))}
  33%  {background-position:calc(0*100%/3) 50%,calc(1*100%/3) 100%           ,calc(1*100%/3) 0              , calc(3*100%/3) 50%,calc(2*100%/3) 100%           ,calc(2*100%/3) 0              }
  66%  {background-position:calc(1*100%/3) 50%,calc(0*100%/3) 100%           ,calc(0*100%/3) 0              , calc(2*100%/3) 50%,calc(3*100%/3) 100%           ,calc(3*100%/3) 0              }
  90%,
  100% {background-position:calc(1*100%/3) 50%,calc(0*100%/3) calc(50% + calc(var(--s)/8)),calc(0*100%/3) calc(50% - calc(var(--s)/8)), calc(2*100%/3) 50%,calc(3*100%/3) calc(50% + calc(var(--s)/8)),calc(3*100%/3) calc(50% - calc(var(--s)/8))}
}

.dots-6 {
  width: 32px;
  aspect-ratio: 1;
  --_g: no-repeat radial-gradient(farthest-side,#000 90%,#0000);
  background: var(--_g), var(--_g), var(--_g), var(--_g);
  background-size: 40% 40%;
  animation: d6 1s infinite;
}

@keyframes d6 {
  0%  {background-position: 0 0      ,100% 0,100% 100%,0 100%}
  40%,
  50% {background-position: 100% 100%,100% 0,0    0   ,0 100%}
  90%,
  100%{background-position: 100% 100%,0 100%,0    0   ,100% 0}
}

.dots-7 {
  height: 15px;
  aspect-ratio: 5;
  background: radial-gradient(closest-side at 37.5% 50%,#000 94%,#0000) 0/calc(80%/3) 100%;
  animation: d7 .75s infinite;
}

@keyframes d7 {
  100% {background-position: 36.36%}
}

.dots-8 {
  height: 15px;
  aspect-ratio: 5;
  -webkit-mask: linear-gradient(90deg,#0000 ,#000 20% 80%,#0000);
  background: radial-gradient(closest-side at 37.5% 50%,#000 94%,#0000) 0/calc(80%/3) 100%;
  animation: d8 .75s infinite linear;
}

@keyframes d8 {
  100% {background-position: 36.36%}
}


.dots-9 {
  height: 15px;
  aspect-ratio: 4;
  --_g: no-repeat radial-gradient(farthest-side,currentColor 90%,#0000);
  background: 
    var(--_g) left, 
    var(--_g) right;
  background-size: 25% 100%;
  display: grid;
}
.dots-9:before,
.dots-9:after {
  content: "";
  height: inherit;
  aspect-ratio: 1;
  grid-area: 1/1;
  margin: auto;
  border-radius: 50%;
  transform-origin: -100% 50%;
  background: currentColor;
  animation: d9 1s infinite linear;
}
.dots-9:after {
  transform-origin: 200% 50%;
  --s:-1;
  animation-delay: -.5s;
}

@keyframes d9 {
  58%,
  100% {transform: rotate(calc(var(--s,1)*1turn))}
}

.dots-10 {
  height: 15px;
  aspect-ratio: 4;
  --_g: no-repeat radial-gradient(farthest-side,#000 90%,#0000);
  background: 
    var(--_g) left, 
    var(--_g) right;
  background-size: 25% 100%;
  display: flex;
}
.dots-10:before{
  content: "";
  flex: 1;
  background: inherit;
  animation: d10 2s infinite;
}
@keyframes d10 {
  0%    {transform: translate( 37.5%) rotate(0)     }
  16.67%{transform: translate( 37.5%) rotate(90deg) }
  33.33%{transform: translate(-37.5%) rotate(90deg) }
  50%   {transform: translate(-37.5%) rotate(180deg)}
  66.67%{transform: translate(-37.5%) rotate(270deg)}
  83.33%{transform: translate( 37.5%) rotate(270deg)}
  100%  {transform: translate( 37.5%) rotate(360deg)}
}

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

* {
  box-sizing: border-box;
}