```
<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;
}
```

This Pen doesn't use any external CSS resources.

This Pen doesn't use any external JavaScript resources.