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

.bars-1 {
  width: 45px; /* the size */
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#000 0 0); /* the color */
  background: 
    var(--c) 0    0,
    var(--c) 0    100%, 
    var(--c) 50%  0,  
    var(--c) 50%  100%, 
    var(--c) 100% 0, 
    var(--c) 100% 100%;
  animation: b1 1s infinite linear;
}

@keyframes b1 {
 80% {background-size:20% 30%}
 0%,
 90%,
 100%{background-size:20% 50%}
}

.bars-2 {
  width: 45px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(#000 0 0);
  background: 
    var(--c) 0    0,
    var(--c) 0    100%, 
    var(--c) 50%  0,  
    var(--c) 50%  100%, 
    var(--c) 100% 0, 
    var(--c) 100% 100%;
  animation: b2 1s infinite;
}

@keyframes b2 {
 0%,100%{background-size:20% 50%}
 16.67% {background-size:20% 30%, 20% 30%, 20% 50%, 20% 50%, 20% 50%, 20% 50%}
 33.33% {background-size:20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 50%, 20% 50%}
 50%    {background-size:20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 30%, 20% 30%}
 66.67% {background-size:20% 50%, 20% 50%, 20% 30%, 20% 30%, 20% 30%, 20% 30%}
 83.33% {background-size:20% 50%, 20% 50%, 20% 50%, 20% 50%, 20% 30%, 20% 30%}
}

.bars-3 {
  width: 45px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(#000 0 0);
  background: 
    var(--c) 0    0,
    var(--c) 0    100%, 
    var(--c) 50%  50%,   
    var(--c) 100% 0, 
    var(--c) 100% 100%;
  animation: b3 1s infinite alternate;
}

@keyframes b3 {
 0%,10%   {background-size:20% 100%}
 50%      {background-size:20%  20%}
 90%,100% {background-size:100% 20%}
}

.bars-4 {
  width: 45px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(#000 0 0);
  background: var(--c), var(--c), var(--c), var(--c), var(--c), var(--c);
  animation: 
    b4-1 .5s infinite alternate,
    b4-2  2s infinite;
}

@keyframes b4-1 {
 0%,10% {background-size:20% 100%}
 100%   {background-size:20% 20%}
}

@keyframes b4-2 {
 0%,49.9% {background-position: 0 0  ,0 100%,50% 50%,50% 50% ,100% 0  ,100% 100%}
 50%,100% {background-position: 0 50%,0  50%,50% 0  ,50% 100%,100% 50%,100% 50% }
}


.bars-5 {
  width: 45px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(#000 0 0);
  background: var(--c), var(--c), var(--c);
  animation: 
    b5-1 1s infinite,
    b5-2 1s infinite;
}

@keyframes b5-1 {
 0%,100% {background-size:20% 100%}
 33%,66% {background-size:20% 40%}
}

@keyframes b5-2 {
 0%,33%   {background-position: 0    0,50% 100%,100% 100%}
 66%,100% {background-position: 100% 0,0   100%,50%  100%}
}

.bars-6 {
  width: 45px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(#000 0 0);
  background: var(--c), var(--c), var(--c);
  animation: 
    b6-1 1s infinite,
    b6-2 1s infinite;
}

@keyframes b6-1 {
 0%,100% {background-size:20% 100%}
 33%,66% {background-size:20% 40%}
}

@keyframes b6-2 {
 0%,33%   {background-position: 0 0   ,50% 100%,100% 0}
 66%,100% {background-position: 0 100%,50% 0   ,100% 100%}
}

.bars-7 {
  width: 45px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(#000 0 0);
  background: 
    var(--c) 0    0, 
    var(--c) 50%  50%, 
    var(--c) 100% 100%;
  animation: 
    b7 1s infinite alternate;
}

@keyframes b7 {
 0%,
 10%  {background-size:20% 100%}
 50%  {background-size:20% 20%}
 90%,
 100% {background-size:100% 20%}
}

.bars-8 {
  width: 45px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(#000 0 0);
  background: var(--c), var(--c), var(--c);
  animation: 
    b8-1 1s infinite,
    b8-2 1s infinite;
}

@keyframes b8-1 {
 0%,100% {background-size:20% 100%}
 33%,66% {background-size:20% 20%}
}

@keyframes b8-2 {
 0%,33%   {background-position: 0    0,50% 50%,100% 100%}
 66%,100% {background-position: 100% 0,50% 50%,0    100%}
}

.bars-9 {
  width: 45px;
  aspect-ratio: 1;
  --c: conic-gradient(from -90deg,#000 90deg,#0000 0);
  background: var(--c), var(--c);
  background-size: 40% 40%;
  animation: b9 1s infinite alternate;
}

@keyframes b9 {
 0%,
 10%  {background-position: 0 0,0            calc(100%/3)}
 50%  {background-position: 0 0,calc(100%/3) calc(100%/3)}
 90%,
 100% {background-position: 0 0,calc(100%/3) 0}
}

.bars-10 {
  width: 45px;
  aspect-ratio: 1;
  --c: conic-gradient(from -90deg,#000 90deg,#0000 0);
  background: var(--c), var(--c);
  background-size: 40% 40%;
  animation: b10 1.5s infinite;
}

@keyframes b10 {
 0%,
 20%  {background-position: 0 0           ,0            calc(100%/3)}
 33%  {background-position: 0 0           ,calc(100%/3) calc(100%/3)}
 66%  {background-position: 0 calc(100%/3),calc(100%/3) 0  }
 80%,
 100% {background-position: 0 calc(100%/3),0            0  }
}

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


* {
  box-sizing: border-box;
}