<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
<div class="line-4"></div>
<div class="line-5"></div>
<div class="line-6"></div>
<div class="line-7"></div>
<div class="line-8"></div>
<div class="line-9"></div>
<div class="line-10"></div>
.line-1 {
  width:50px;
  height:50px;
  display: grid;
  color: #046D8B;
}

.line-1:before,
.line-1:after {
  content: "";
  grid-area: 1/1;
  --c1:linear-gradient(90deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
  --c2:linear-gradient( 0deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
  background:
    var(--c1),
    var(--c2),
    var(--c1),
    var(--c2);
  background-size:300% 4px,4px 300%;
  background-repeat: no-repeat;
  animation: l1 1s infinite linear;
}
.line-1:after {
  margin: 10px;
  transform: scaleX(-1);
  animation-delay: -.25s;
}

@keyframes l1 {
  0%   {background-position: 50%  0,100% 100%,0    100%,0 0}
  25%  {background-position: 0    0,100% 50% ,0    100%,0 0}
  50%  {background-position: 0    0,100% 0   ,50%  100%,0 0}
  75%  {background-position: 0    0,100% 0   ,100% 100%,0 50%}
 75.01%{background-position: 100% 0,100% 0   ,100% 100%,0 50%}
  100% {background-position: 50%  0,100% 0   ,100% 100%,0 100%}
}

.line-2 {
  width:50px;
  height:50px;
  display: grid;
  color: #046D8B;
}

.line-2:before,
.line-2:after {
  content: "";
  grid-area: 1/1;
  margin: 0 0 15px 15px;
  --c1:linear-gradient(90deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
  --c2:linear-gradient( 0deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
  background:
    var(--c1),
    var(--c2),
    var(--c1),
    var(--c2);
  background-size:300% 4px,4px 300%;
  background-repeat: no-repeat;
  animation: l2 1s infinite linear;
}
.line-2:after {
  margin: 15px 15px 0 0;
  transform: scale(-1,-1);
}

@keyframes l2 {
  0%   {background-position: 50%  0,100% 100%,0    100%,0 0}
  25%  {background-position: 0    0,100% 50% ,0    100%,0 0}
  50%  {background-position: 0    0,100% 0   ,50%  100%,0 0}
  75%  {background-position: 0    0,100% 0   ,100% 100%,0 50%}
 75.01%{background-position: 100% 0,100% 0   ,100% 100%,0 50%}
  100% {background-position: 50%  0,100% 0   ,100% 100%,0 100%}
}

.line-3 {
  width: 80px;
  height: 40px;
  display: flex;
  color: #046D8B;
}
.line-3:before,
.line-3:after {
  content: "";
  margin:0 -2px 0 0;
  flex: 1;
  --c: linear-gradient(currentColor 0 0);
  background: var(--c), var(--c), var(--c), var(--c);
  background-repeat: no-repeat;
  animation: l3-1 1s infinite linear, l3-2 1s infinite linear;
}
.line-3:after {
  transform: scale(-1);
  margin:0 0 0 -2px;
}

@keyframes l3-1 {
  0%,
  3%   {background-size: 0   4px,4px 0  ,0   4px,4px 0  }
  12.5%{background-size: 50% 4px,4px 0  ,0   4px,4px 0  }
  25%  {background-size: 50% 4px,4px 50%,0   4px,4px 0  }
  37.5%{background-size: 50% 4px,4px 50%,50% 4px,4px 0  }
  46%,
  54%  {background-size: 50% 4px,4px 50%,50% 4px,4px 50%}
  62.5%{background-size: 0   4px,4px 50%,50% 4px,4px 50%}
  75%  {background-size: 0   4px,4px 0  ,50% 4px,4px 50%}
  87.5%{background-size: 0   4px,4px 0  ,0   4px,4px 50%}
  96%,
  100% {background-size: 0   4px,4px 0  ,0   4px,4px 0  }
}

@keyframes l3-2 {
  0%,49.9%{background-position:0              20px,50% 20px,20px 100%,100% 100%}
  50%,100%{background-position:right 20px top 20px,50% 100%,100% 100%,100% 20px}
}

.line-4 {
  width: 60px;
  height: 30px;
  display: grid;
  color: #046D8B;
}
.line-4:before,
.line-4:after {
  content: "";
  grid-area: 1/1;
  --c: linear-gradient(currentColor 0 0);
  background: var(--c), var(--c), var(--c);
  background-repeat: no-repeat;
  animation: l4-1 1s infinite linear, l4-2 1s infinite linear;
}
.line-4:after {
  transform: scale(-1);
}

@keyframes l4-1 {
  0%,
  3%    {background-size: 0               4px,4px 0   ,0               4px}
  16.67%{background-size: calc(50% - 6px) 4px,4px 0   ,0               4px}
  33.33%{background-size: calc(50% - 6px) 4px,4px 14px,0               4px}
  46%,
  54%   {background-size: calc(50% - 6px) 4px,4px 14px,calc(50% + 6px) 4px}
  66.67%{background-size: 0               4px,4px 14px,calc(50% + 6px) 4px}
  83.33%{background-size: 0               4px,4px 0   ,calc(50% + 6px) 4px}
  96%,
  100%  {background-size: 0               4px,4px 0   ,0               4px}
}


@keyframes l4-2 {
  0%,49.9%{background-position:0              50%,left calc(50% - 6px) bottom 13px,left  24px top 3px}
  50%,100%{background-position:right 36px top 50%,left calc(50% - 6px) top     3px,right 0    top 3px}
}

.line-5 {
  width:60px;
  height:20px;
  display: grid;
  color: #046D8B;
}

.line-5:before,
.line-5:after {
  content: "";
  grid-area: 1/1;
  --c1:linear-gradient(90deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
  --c2:linear-gradient( 0deg,#0000 calc(100%/3),currentColor 0 calc(2*100%/3),#0000 0);
  background:
    var(--c1),
    var(--c2),
    var(--c1),
    var(--c2);
  background-size:300% 4px,4px 300%;
  background-repeat: no-repeat;
  animation: l5 1.5s infinite;
}
.line-5:after {
  animation-delay: -.75s;
}

@keyframes l5 {
  0%   {background-position: 50%  0,100% 100%,0    100%,0 0}
  25%  {background-position: 0    0,100% 50% ,0    100%,0 0}
  50%  {background-position: 0    0,100% 0   ,50%  100%,0 0}
  75%  {background-position: 0    0,100% 0   ,100% 100%,0 50%}
 75.01%{background-position: 100% 0,100% 0   ,100% 100%,0 50%}
  100% {background-position: 50%  0,100% 0   ,100% 100%,0 100%}
}

.line-6 {
  width:60px;
  height:16px;
  display: grid;
  color: #046D8B;
}

.line-6:before,
.line-6:after {
  content: "";
  grid-area: 1/1;
  --c: linear-gradient(currentColor 0 0);
  background: var(--c), var(--c), var(--c);
  background-repeat: no-repeat;
  animation: l6-1 1.5s infinite linear, l6-2 1.5s infinite linear;
  transform: scale(var(--s,1)) translate(3px,-3px);
}
.line-6:after {
  --s:-1;
}

@keyframes l6-1 {
  0%,
  3%    {background-size: 0    4px,4px 0   ,0    4px}
  16.67%{background-size: 100% 4px,4px 0   ,0    4px}
  33.33%{background-size: 100% 4px,4px 100%,0    4px}
  46%,
  54%   {background-size: 100% 4px,4px 100%,100% 4px}
  66.67%{background-size: 0    4px,4px 100%,100% 4px}
  83.33%{background-size: 0    4px,4px 0   ,100% 4px}
  96%,
  100%  {background-size: 0    4px,4px 0   ,0    4px}
}

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

.line-7 {
  width:50px;
  height:50px;
  display: flex;
  color: #046D8B;
}

.line-7:before,
.line-7:after {
  content: "";
  flex: 1;
  margin:0 0 0 -2px;
  --c: linear-gradient(currentColor 0 0);
  background: 
    var(--c) 0    0, 
    var(--c) 100% 0, 
    var(--c) 100% 100%, 
    var(--c) 0    100%, 
    var(--c) 0    50%;
  background-repeat: no-repeat;
  animation: l7 1s infinite alternate;
}
.line-7:before {
  transform: scale(-1);
  margin:0 -2px 0 0;
}

@keyframes l7 {
  0%,
  5%   {background-size: 0    4px,4px 0   ,0    4px,4px 0   ,0    4px}
  20%  {background-size: 100% 4px,4px 0   ,0    4px,4px 0   ,0    4px}
  40%  {background-size: 100% 4px,4px 100%,0    4px,4px 0   ,0    4px}
  60%  {background-size: 100% 4px,4px 100%,100% 4px,4px 0   ,0    4px}
  80%  {background-size: 100% 4px,4px 100%,100% 4px,4px 50% ,0    4px}
  95%,
  100% {background-size: 100% 4px,4px 100%,100% 4px,4px 50% ,100% 4px}
}

.line-8 {
  width:60px;
  height:60px;
  padding:10px;
  display: grid;
  color: #046D8B;
}
.line-8,
.line-8:before,
.line-8:after {
  --c: linear-gradient(currentColor 0 0);
  background:var(--c), var(--c), var(--c), var(--c);
  background-repeat: no-repeat;
  animation: l8-1 1.5s infinite  cubic-bezier(0,0,1,1), l8-2 1.5s infinite;
}
.line-8:before,
.line-8:after {
  content: "";
  grid-area: 1/1;
  animation-timing-function: cubic-bezier(0,0.2,1,1),linear;
}

.line-8:after {
  margin: 10px;
  animation-timing-function: cubic-bezier(0,0.4,1,1),linear;
}

@keyframes l8-1 {
  0%,
  10%   {background-size: 0    4px,4px 0 }
  40%,
  60%   {background-size: 100% 4px,4px 100%}
  90%,
  100%  {background-size: 0    4px,4px 0  }
}

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

.line-9 {
  width:30px;
  height:30px;
  display: grid;
  color: #046D8B;
}
.line-9,
.line-9:before,
.line-9:after {
  --c: linear-gradient(currentColor 0 0);
  background:var(--c), var(--c), var(--c), var(--c);
  background-repeat: no-repeat;
  animation: l9-1 1.5s infinite, l9-2 1.5s infinite;
}
.line-9:before,
.line-9:after {
  content: "";
  grid-area: 1/1;
  transform: translate(calc(50% - 2px),calc(2px - 50%)) rotate(90deg);
  animation-delay: -.25s;
}
.line-9:after {
  transform: translate(calc(2px - 50%),calc(50% - 2px)) rotate(90deg);
}


@keyframes l9-1 {
  0%,
  10%   {background-size: 0    4px,4px 0 }
  40%,
  60%   {background-size: 100% 4px,4px 100%}
  90%,
  100%  {background-size: 0    4px,4px 0  }
}

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


.line-10 {
  width:25px;
  height:25px;
  display: grid;
  color: #046D8B;
}

.line-10,
.line-10:before,
.line-10:after {
  --c: linear-gradient(currentColor 0 0);
  background:var(--c), var(--c), var(--c), var(--c);
  background-repeat: no-repeat;
  animation: l10-1 1.5s infinite linear, l10-2 1.5s infinite linear;
}

.line-10:before,
.line-10:after {
  content: "";
  grid-area: 1/1;
  transform: translate(calc(100% - 4px),calc(4px - 100%)) rotate(90deg);
}
.line-10:after {
  transform: translate(calc(4px - 100%),calc(100% - 4px)) rotate(-90deg);
}

@keyframes l10-1 {
  0%   {background-size: 0    4px,4px 0   ,0    4px,4px 0   }
  12.5%{background-size: 100% 4px,4px 0   ,0    4px,4px 0   }
  25%  {background-size: 100% 4px,4px 100%,0    4px,4px 0   }
  37.5%{background-size: 100% 4px,4px 100%,100% 4px,4px 0   }
  43%,
  57%  {background-size: 100% 4px,4px 100%,100% 4px,4px 100%}
  62.5%{background-size: 0    4px,4px 100%,100% 4px,4px 100%}
  75%  {background-size: 0    4px,4px 0   ,100% 4px,4px 100%}
  87.5%{background-size: 0    4px,4px 0   ,0    4px,4px 100%}
  100% {background-size: 0    4px,4px 0   ,0    4px,4px 0   }
}

@keyframes l10-2 {
  0%,49.9%{background-position: 0 0   ,100% 0   ,100% 100%,0 100%}
  50%,100%{background-position: 100% 0,100% 100%,0    100%,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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.