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

.thin-1 {
  height: 9px;
  width: 60px;
  --c:no-repeat linear-gradient(currentColor 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 26% 3px;
  animation: t1 1s infinite;
}

@keyframes t1 {
  0%,
  70%,
  100%   {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  11.67% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  23.33% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  35%    {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
  46.67% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
  58.34% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%}
}

.thin-2 {
  height: 9px;
  width: 60px;
  --c:no-repeat linear-gradient(currentColor 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 26% 3px;
  animation: t2 1s infinite;
}

@keyframes t2 {
  0%,
  70%,
  100% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  14%  {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  28%  {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  42%  {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 100%}
  56%  {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
}

.thin-3 {
  height: 9px;
  width: 60px;
  --c:no-repeat linear-gradient(currentColor 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 26% 3px;
  background-repeat: no-repeat;
  animation: t3 1s infinite;
}

@keyframes t3 {
  0%,
  10%   {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  17.5% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  25%   {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  32.5% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 100%}
  40%,
  60%   {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 0   }
  67.5% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 0   }
  75%   {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 0   }
  82.5% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 0   }
  90%,
  100%  {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
}

.thin-4 {
  height: 15px;
  width: 60px;
  --c:repeating-linear-gradient(#0000 0 6px,currentColor 0 9px,#0000 0 15px);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 26% 200%;
  background-repeat: no-repeat;
  animation: t4 1.5s infinite linear;
}

@keyframes t4 {
  0%,
  70%,
  100%  {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  17.5% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  35%   {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 100%,calc(3*100%/3) 100%}
  52.5% {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 100%}
  69.99%{background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 0   ,calc(2*100%/3) 0   ,calc(3*100%/3) 0   }
}

.thin-5 {
  height: 9px;
  width: 60px;
  --c:linear-gradient(currentColor 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 26% 3px;
  background-repeat: no-repeat;
  animation: t5 1s infinite;
}

@keyframes t5 {
  0%,
  70%,
  100% {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) 100%,calc(2*100%/3) 50% ,calc(3*100%/3) 50% }
  37.5%{background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 50% }
  50%,
  60%  {background-position: calc(0*100%/3) 0   ,calc(1*100%/3) 100%,calc(2*100%/3) 0   ,calc(3*100%/3) 100%}
}

.thin-6 {
  height: 9px;
  width: 60px;
  --c:linear-gradient(currentColor 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 26% 3px;
  background-repeat: no-repeat;
  animation: t6 1s infinite;
}

@keyframes t6 {
  0%,
  70%,
  100%  {background-position: calc(0*100%/3) 50%,calc(1*100%/3) 50% ,calc(2*100%/3) 50%,calc(3*100%/3) 50% }
  23.33%{background-position: calc(0*100%/3) 0  ,calc(1*100%/3) 100%,calc(2*100%/3) 0  ,calc(3*100%/3) 100%}
  46.67%{background-position: calc(1*100%/3) 0  ,calc(0*100%/3) 100%,calc(3*100%/3) 0  ,calc(2*100%/3) 100%}
  69.99%{background-position: calc(1*100%/3) 50%,calc(0*100%/3) 50% ,calc(3*100%/3) 50%,calc(2*100%/3) 50% }
}

.thin-7 {
  height: 3px;
  width: 75px;
  --c:linear-gradient(currentColor 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 21% 100%;
  background-repeat: no-repeat;
  animation: t7 1s infinite alternate;
}

@keyframes t7 {
  0%,
  20%  {background-position: calc(0*100%/4) 0,calc(1*100%/4) 0,calc(2*100%/4) 0,calc(3*100%/4) 0}
  35%  {background-position: calc(0*100%/4) 0,calc(1*100%/4) 0,calc(2*100%/4) 0,calc(4*100%/4) 0}
  50%  {background-position: calc(0*100%/4) 0,calc(1*100%/4) 0,calc(3*100%/4) 0,calc(4*100%/4) 0}
  65%  {background-position: calc(0*100%/4) 0,calc(2*100%/4) 0,calc(3*100%/4) 0,calc(4*100%/4) 0}
  80%,
  100% {background-position: calc(1*100%/4) 0,calc(2*100%/4) 0,calc(3*100%/4) 0,calc(4*100%/4) 0}
}

.thin-8 {
  height: 12px;
  width: 60px;
  --c:linear-gradient(currentColor 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-size: 26% 3px;
  background-repeat: no-repeat;
  animation: t8 1s infinite;
}

@keyframes t8 {
  0%,
  70%,
  100%  {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50%,calc(2*100%/3) 50%,calc(3*100%/3) 50%}
  23.33%{background-position: calc(0*100%/3) 100%,calc(1*100%/3) 66%,calc(2*100%/3) 33%,calc(3*100%/3) 0  }
  46.67%{background-position: calc(3*100%/3) 100%,calc(2*100%/3) 66%,calc(1*100%/3) 33%,calc(0*100%/3) 0  }
  69.99%{background-position: calc(3*100%/3) 50% ,calc(2*100%/3) 50%,calc(1*100%/3) 50%,calc(0*100%/3) 50%}
}

.thin-9 {
  height: 6px;
  width: 60px;
  --c:repeating-linear-gradient(90deg,currentColor 0 3px,#0000 0 6px);
  background: var(--c), var(--c);
  background-size: 100% 3px;
  background-repeat: no-repeat;
  animation: t9 1s infinite;
}
@keyframes t9 {
  0%,
  70%,
  100%   {background-position: 0   50%,3px 50% }
  23.33% {background-position: 0   0  ,3px 100%}
  46.67% {background-position: 3px 0  ,0   100%}
  69.99% {background-position: 3px 50%,0   50% }
}

.thin-10 {
  height: 3px;
  width: 60px;
  background: linear-gradient(currentColor 0 0) right/51% 100% no-repeat;
  display: flex;
  animation: t10-0 2s linear infinite;
}
.thin-10:before,
.thin-10:after {
  content: "";
  width:15px;
  background:currentColor;
  animation: t10-1 2s linear infinite;
}
.thin-10:after {
  animation-delay: -1s;
  --s:-1;
}

@keyframes t10-1 {
  0%,100%{transform:scaleX(var(--s,1)) rotate(0)}
  25%,75%   {transform:scaleX(var(--s,1)) rotate(180deg)}
}

@keyframes t10-0 {
  0%,49.9%{transform:scaleX( 1)}
  50%,100%{transform:scaleX(-1)}
}


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

* {
  box-sizing: border-box;
}