拆分的loading效果

/* div {
  position: relative;
  width: 80px;
  height: 50px;
  background: #efefef;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}
div::before {
  content: 'Loading...';
  clip-path: inset(0 0 50%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: beforeAnima 1s ease infinite;
}
div::after {
  content: 'Loading...';
  clip-path: inset(50% 0 0);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: afterAnima 1s ease infinite;
}
@keyframes beforeAnima {
  0% {
    left: -50%;
  }
  20% {
    left: 50%;
  }
  80% {
    left: 50%;
  }
  100% {
    left: 150%;
  }
}
@keyframes afterAnima {
  0% {
    left: 150%;
  }
  20% {
    left: 50%;
  }
  80% {
    left: 50%;
  }
  100% {
    left: -50%;
  }
} */
/* HTML: <div class="loader"></div> */
.loader {
  font-weight: bold;
  font-family: monospace;
  font-size: 30px;
  display: inline-grid;
  overflow: hidden;
}
.loader:before,
.loader:after {
  content: "Loading...";
  grid-area: 1/1;
  clip-path: inset(0 -200% 50%);
  text-shadow: -10ch 0 0;
  animation: l12 1s infinite;
}
.loader:after {
  clip-path: inset(50% -200% 0%);
  text-shadow: 10ch 0 0;
  --s:-1;
}
@keyframes l12 {50%,100%{transform: translateX(calc(var(--s,1)*100%));}}