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

.dots-bars-1 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(currentColor 0 0);
  background: 
    var(--c), 
    var(--c), 
    var(--c);
  background-size: 8px calc(50% + 8px);
  background-repeat: no-repeat;
  -webkit-mask:radial-gradient(circle closest-side,#0000 92%,#000) 0/8px 100%;
  animation: db1 .75s infinite alternate linear;
}


@keyframes db1 {
  0%,
  10%  {background-position: 0 100%,50% 100%,100% 100%}
  25%  {background-position: 0 50% ,50% 100%,100% 100%}
  50%  {background-position: 0 0   ,50% 50% ,100% 100%}
  75%  {background-position: 0 0   ,50% 0   ,100% 50% }
  90%
  ,100%{background-position: 0 0   ,50% 0   ,100% 0   }
}

.dots-bars-2 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(currentColor 0 0);
   --m: radial-gradient(circle closest-side,#0000 92%,#000);
  background: 
    var(--c) 0    50%,
    var(--c) 50%  50%, 
    var(--c) 100% 50%;
  background-size: 8px calc(50% + 8px);
  background-repeat: no-repeat;
  -webkit-mask:
    var(--m),
    var(--m),
    var(--m);
  -webkit-mask-size:8px 150%;
  -webkit-mask-repeat:no-repeat;
  animation: db2 1s infinite alternate;
}

@keyframes db2 {
  0%,
  100% {-webkit-mask-position: 0 50% ,50% 50% ,100% 50% }
  20%  {-webkit-mask-position: 0 100%,50% 50% ,100% 50% }
  40%  {-webkit-mask-position: 0 0   ,50% 100%,100% 50% }
  60%  {-webkit-mask-position: 0 50% ,50% 0   ,100% 100%}
  80%  {-webkit-mask-position: 0 50% ,50% 50% ,100% 0   }
}

.dots-bars-3 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(currentColor 0 0);
   --m: radial-gradient(farthest-side,#000 92%,#0000);
  background: 
    var(--c), 
    var(--m),
    var(--c), 
    var(--m), 
    var(--c), 
    var(--m);
  background-size: 8px 12px,8px 8px;
  background-repeat: no-repeat;
  animation: db3 1s infinite alternate;
}

@keyframes db3 {
  0%,
  100%  {background-position: 0 0              ,0 100%           ,50% 0              ,50% 100%           ,100% 0              ,100% 100%}
  20%   {background-position: 0 calc(50% - 6px),0 calc(50% + 4px),50% 0              ,50% 100%           ,100% 0              ,100% 100%}
  40%   {background-position: 0 calc(50% - 6px),0 calc(50% + 4px),50% calc(50% - 6px),50% calc(50% + 4px),100% 0              ,100% 100%}
  60%   {background-position: 0 0              ,0 100%           ,50% calc(50% - 6px),50% calc(50% + 4px),100% calc(50% - 6px),100% calc(50% + 4px)}
  80%   {background-position: 0 0              ,0 100%           ,50% 0              ,50% 100%           ,100% calc(50% - 6px),100% calc(50% + 4px)}
}

.dots-bars-4 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(currentColor 0 0);
   --m: radial-gradient(farthest-side,#000 92%,#0000);
  background: 
    var(--c), 
    var(--m),
    var(--c), 
    var(--m), 
    var(--c), 
    var(--m);
  background-size: 8px 15px,8px 8px;
  background-repeat: no-repeat;
  animation: db4 1s infinite alternate;
}

@keyframes db4 {
  0%,
  10% {background-position: 0 0   ,0 100%,50% 0   ,50% 100%,100% 0   ,100% 100%}
  33% {background-position: 0 100%,0 0   ,50% 0   ,50% 100%,100% 0   ,100% 100%}
  66% {background-position: 0 100%,0 0   ,50% 100%,50% 0   ,100% 0   ,100% 100%}
  90%,
  100%{background-position: 0 100%,0 0   ,50% 100%,50% 0   ,100% 100%,100% 0   }
}

.dots-bars-5 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(currentColor 0 0);
   --m: radial-gradient(farthest-side,#000 92%,#0000);
  background: 
    var(--c), 
    var(--m),
    var(--c), 
    var(--m), 
    var(--c), 
    var(--m);
  background-size: 8px 15px,8px 8px;
  background-repeat: no-repeat;
  animation: db5 2s infinite;
}

@keyframes db5 {
  0%     {background-position: 0 0               ,0 100%,50% 0               ,50% 100%,100% 0               ,100% 100%}
  11.11% {background-position: 0 calc(100% - 8px),0 100%,50% 0               ,50% 100%,100% 0               ,100% 100%}
  22.22% {background-position: 0 calc(100% - 8px),0 100%,50% calc(100% - 8px),50% 100%,100% 0               ,100% 100%}
  33.33% {background-position: 0 calc(100% - 8px),0 100%,50% calc(100% - 8px),50% 100%,100% calc(100% - 8px),100% 100%}
  44.44% {background-position: 0 0               ,0 15px,50% calc(100% - 8px),50% 100%,100% calc(100% - 8px),100% 100%}
  55.55% {background-position: 0 0               ,0 15px,50% 0               ,50% 15px,100% calc(100% - 8px),100% 100%}
  66.66% {background-position: 0 0               ,0 15px,50% 0               ,50% 15px,100% 0               ,100% 15px}
  77.77% {background-position: 0 0               ,0 100%,50% 0               ,50% 15px,100% 0               ,100% 15px}
  88.88% {background-position: 0 0               ,0 100%,50% 0               ,50% 100%,100% 0               ,100% 15px}
  100%   {background-position: 0 0               ,0 100%,50% 0               ,50% 100%,100% 0               ,100% 100%}
}

.dots-bars-6 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(currentColor 0 0);
   --m: radial-gradient(farthest-side,#000 92%,#0000);
  background: 
    var(--c), 
    var(--m),
    var(--c), 
    var(--m), 
    var(--c), 
    var(--m);
  background-size: 8px 12px,8px 8px;
  background-repeat: no-repeat;
  animation: db6 1s infinite linear alternate;
}

@keyframes db6 {
  0%,5%   {background-position: 0 50%             ,0 0               ,50% 50%             ,50% 0               ,100% 50%             ,100% 0}
  16.67%  {background-position: 0 50%             ,0 calc(50% - 10px),50% 50%             ,50% 0               ,100% 50%             ,100% 0}
  33.33%  {background-position: 0 calc(50% + 10px),0 50%             ,50% 50%             ,50% 0               ,100% 50%             ,100% 0}
  50%     {background-position: 0 calc(50% + 10px),0 50%             ,50% 50%             ,50% calc(50% - 10px),100% 50%             ,100% 0}
  66.67%  {background-position: 0 calc(50% + 10px),0 50%             ,50% calc(50% + 10px),50% 50%             ,100% 50%             ,100% 0}
  83.33%  {background-position: 0 calc(50% + 10px),0 50%             ,50% calc(50% + 10px),50% 50%             ,100% 50%             ,100% calc(50% - 10px)}
  95%,100%{background-position: 0 calc(50% + 10px),0 50%             ,50% calc(50% + 10px),50% 50%             ,100% calc(50% + 10px),100% 50%}
}

.dots-bars-7 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(currentColor 0 0);
   --m: radial-gradient(farthest-side,#000 92%,#0000);
  background: 
    var(--c), 
    var(--m),
    var(--c), 
    var(--m), 
    var(--c), 
    var(--m);
  background-size: 8px 12px,8px 8px;
  background-repeat: no-repeat;
  animation: db7 1s infinite linear;
}

@keyframes db7 {
  0%,5% {background-position: 0 50%             ,0 0               ,50% 50%             ,50% 0               ,100% 50%             ,100% 0}
  12.5% {background-position: 0 50%             ,0 calc(50% - 10px),50% 50%             ,50% 0               ,100% 50%             ,100% 0}
  25%   {background-position: 0 calc(50% + 10px),0 50%             ,50% 50%             ,50% 0               ,100% 50%             ,100% 0}
  37.5% {background-position: 0 calc(50% + 10px),0 50%             ,50% 50%             ,50% calc(50% - 10px),100% 50%             ,100% 0}
  50%   {background-position: 0 50%             ,0 0               ,50% calc(50% + 10px),50% 50%             ,100% 50%             ,100% 0}
  62.5% {background-position: 0 50%             ,0 0               ,50% calc(50% + 10px),50% 50%             ,100% 50%             ,100% calc(50% - 10px)}
  75%   {background-position: 0 50%             ,0 0               ,50% 50%             ,50% 0               ,100% calc(50% + 10px),100% 50%}
  87.5% {background-position: 0 50%             ,0 0               ,50% 50%             ,50% 0               ,100% calc(50% + 10px),100% 50%}
  95%,
  100%  {background-position: 0 50%             ,0 0               ,50% 50%             ,50% 0               ,100% 50%             ,100% 0}
}


.dots-bars-8 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(currentColor 0 0);
   --m: radial-gradient(farthest-side,#000 92%,#0000);
  background: 
    var(--m) center               /12px 12px,
    var(--c) left 50% top    -20px/8px 16px, 
    var(--c) left 50% bottom -20px/8px 16px, 
    var(--c) top  50% left   -20px/16px 8px, 
    var(--c) top  50% right  -20px/16px 8px;
  background-repeat: no-repeat;
  animation: 
    db8-1 1.5s infinite,
    db8-2 1.5s infinite;
}

@keyframes db8-1 {
  30%,
  70% {background-position: 
        center,
        left 50% top    calc(50% - 8px),
        left 50% bottom calc(50% - 8px),
        top  50% left   calc(50% - 8px),
        top  50% right  calc(50% - 8px)}
}

@keyframes db8-2 {
  0%,40%   {transform: rotate(0)}
  60%,100% {transform: rotate(90deg)}
}

.dots-bars-9 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(currentColor 0 0);
   --m: radial-gradient(farthest-side,#000 90%,#0000);
  background: 
    var(--c), 
    var(--m),
    var(--c);
  background-size:16px 8px,10px 10px; 
  background-repeat: no-repeat;
  animation: 
    db9-1 .5s infinite alternate,
    db9-2 4s infinite linear .5s;
}
@keyframes db9-1 {
  0%,10%   {background-position: calc(50% - 8px) 50%,50% 10%,calc(50% + 8px)   50%}
  80%,100% {background-position: -20px           50%,50% 50%,calc(100% + 20px) 50%}
}
@keyframes db9-2 {
  0% ,24.99% {transform: rotate(0)}
  25%,49.99% {transform: rotate(90deg)}
  50%,74.99% {transform: rotate(180deg)}
  75%,100%   {transform: rotate(270deg)}
}

.dots-bars-10 {
  width: 40px;
  height: 40px;
   --c: linear-gradient(currentColor 0 0);
   --m: radial-gradient(farthest-side,#000 90%,#0000);
  background: 
    var(--c), 
    var(--m),
    var(--c);
  background-size:16px 8px,10px 10px; 
  background-repeat: no-repeat;
  animation: 
    db10-1 1s infinite linear,
    db10-2 4s infinite linear -.4s;
}
@keyframes db10-1 {
  0%,10%   {background-position: calc(50% - 8px) 50%,50% -15px             ,calc(50% + 8px)   50%}
  33%      {background-position: -20px 50%          ,50%  50%              ,calc(100% + 20px) 50%}
  66%      {background-position: -20px 50%          ,50%  calc(100% + 15px),calc(100% + 20px) 50%}
  80%,100% {background-position: calc(50% - 8px)50% ,50%  calc(100% + 15px),calc(50% + 8px)   50%}
}
@keyframes db10-2 {
  0% ,24.99% {transform: rotate(0)}
  25%,49.99% {transform: rotate(90deg)}
  50%,74.99% {transform: rotate(180deg)}
  75%,100%   {transform: rotate(270deg)}
}

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

* {
  box-sizing: border-box;
}