<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;
  height:40px;
  --c:linear-gradient(currentColor 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size:9px 100%;
  background-repeat: no-repeat;
  animation:b1 1s infinite linear;
}
@keyframes b1 {
    33%{background-size:9px 10% ,9px 100%,9px 100%}
    50%{background-size:9px 100%,9px 10% ,9px 100%}
    66%{background-size:9px 100%,9px 100%,9px 10% }
}

.bars-2 {
  width:45px;
  height:40px;
  --c:linear-gradient(currentColor 0 0);
  background: 
    var(--c) 0%   100%,
    var(--c) 50%  100%,
    var(--c) 100% 100%;
  background-size:9px 100%;
  background-repeat: no-repeat;
  animation:b2 1s infinite linear;
}
@keyframes b2 {
    20% {background-size:9px 60% ,9px 100%,9px 100%}
    40% {background-size:9px 80% ,9px 60% ,9px 100%}
    60% {background-size:9px 100%,9px 80% ,9px 60% }
    80% {background-size:9px 100%,9px 100%,9px 80% }
}

.bars-3 {
  width:45px;
  height:40px;
  background: 
    linear-gradient(#0000 calc(1*100%/6),currentColor 0 calc(3*100%/6),#0000 0) left bottom,
    linear-gradient(#0000 calc(2*100%/6),currentColor 0 calc(4*100%/6),#0000 0) center bottom,
    linear-gradient(#0000 calc(3*100%/6),currentColor 0 calc(5*100%/6),#0000 0) right bottom;
  background-size:9px 600%;
  background-repeat: no-repeat;
  animation:b3 1s infinite linear;
}
@keyframes b3 {
    100% {background-position: left top,center top,right top }
}

.bars-4 {
  width:45px;
  height:40px;
  --c:linear-gradient(#000 calc(50% - 10px),#0000 0 calc(50% + 10px),currentColor 0);
  background: 
    var(--c) 0%   100%,
    var(--c) 50%  100%,
    var(--c) 100% 100%;
  background-size:9px calc(200% + 20px);
  background-repeat: no-repeat;
  animation:b4 1s infinite linear;
}
@keyframes b4 {
    33%  {background-position: 0% 50%,50% 100%,100% 100%}
    50%  {background-position: 0%  0%,50%  50%,100% 100%}
    66%  {background-position: 0%  0%,50%   0%,100%  50%}
    100% {background-position: 0%  0%,50%   0%,100%   0%}
}

.bars-5 {
  width:45px;
  height:60px;
  --c:linear-gradient(currentColor 0 0);
  background: 
    var(--c) 0%   100%,
    var(--c) 50%  100%,
    var(--c) 100% 100%;
  background-size:9px 65%;
  background-repeat: no-repeat;
  animation:b5 1s infinite linear;
}
@keyframes b5 {
    20% {background-position:0% 50% ,50% 100%,100% 100%}
    40% {background-position:0% 0%  ,50% 50% ,100% 100%}
    60% {background-position:0% 100%,50% 0%  ,100% 50% }
    80% {background-position:0% 100%,50% 100%,100% 0%  }
}

.bars-6 {
  width:45px;
  height:60px;
  --c:linear-gradient(currentColor 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size:9px 50%;
  background-repeat: no-repeat;
  animation:b6 1s infinite linear;
}
@keyframes b6 {
    20% {background-position:0% 0%  ,50% 50% ,100% 50% }
    40% {background-position:0% 100%,50% 0%  ,100% 50% }
    60% {background-position:0% 50% ,50% 100%,100% 0%  }
    80% {background-position:0% 50% ,50% 50% ,100% 100%}
}

.bars-7 {
  width:45px;
  height:60px;
  --c:linear-gradient(currentColor 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size:9px 50%;
  background-repeat: no-repeat;
  animation:b7 1s infinite linear alternate;
}
@keyframes b7 {
    20% {background-size:9px 20% ,9px 50% ,9px 50% }
    40% {background-size:9px 100%,9px 20% ,9px 50% }
    60% {background-size:9px 50% ,9px 100%,9px 20% }
    80% {background-size:9px 50% ,9px 50% ,9px 100%}
}

.bars-8 {
  width:45px;
  height:60px;
  --c:linear-gradient(currentColor 0 0);
  background: 
    var(--c) 0%   100%,
    var(--c) 50%  100%,
    var(--c) 100% 100%;
  background-size:9px 65%;
  background-repeat: no-repeat;
  animation:b8 1s infinite linear;
}
@keyframes b8 {
    16.67% {background-position:0% 0%  ,50% 100%,100% 100%}
    33.33% {background-position:0% 0%  ,50% 0%  ,100% 100%}
    50%    {background-position:0% 0%  ,50% 0%  ,100% 0%  }
    66.67% {background-position:0% 100%,50% 0%  ,100% 0%  }
    83.33% {background-position:0% 100%,50% 100%,100% 0%  }

}

.bars-9 {
  width:45px;
  height:60px;
  --c:linear-gradient(currentColor 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size:9px 60%;
  background-repeat: no-repeat;
  animation:b9 1s infinite;
}
@keyframes b9 {
    33% {background-position:0% 0%  ,50% 100%,100% 0%  }
    66% {background-position:0% 100%,50% 0%  ,100% 100%}
}

.bars-10 {
  width:54px;
  height:45px;
  --c:repeating-linear-gradient(90deg,currentColor 0 9px,#0000 0 18px);
  background: 
    var(--c) 50% 0,
    var(--c) 50% 100%;
  background-size:45px 50%;
  background-repeat: no-repeat;
  animation:b10 1s infinite linear;
}
@keyframes b10 {
  33%  {background-position: 0   0   ,100% 100%}
  66%  {background-position: 0   100%,100% 0   }
  100% {background-position: 50% 100%,50%  0   }
}


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

* {
  box-sizing: border-box;
}
/* more loaders here: https://dev.to/afif/series/12889 */
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.