简单的 loading

body {
  background: #171717;
}

progress {
  --progress: 0%;
  --color: gold;
  --speed: 1s;
  --dark-color: color-mix(in srgb, var(--color), red 25%);

  display: block;
  width: 500px;
  height: 75px;
  border: 1px solid #fff;
  margin: 8rem auto;
  box-shadow: 0 0 4px #aaa;
  padding: 1rem;
  animation: shine 2.5s linear infinite;
}

progress:indeterminate {
  animation: loading 5s linear infinite;
  background: repeating-linear-gradient(130deg, red 0 24px, white 25px 48px, red 49px 54.5px);
  &::-webkit-progress-value { display: none }
  &::-webkit-progress-bar { display: none }
}

@keyframes loading {
  from { background-position: 0 0 }
  to { background-position: 500px 0 }
}

::-webkit-progress-inner-element {
  background-position: inherit;
}

::-webkit-progress-bar {
  background: #5556;
  height: 100%;
  background-position: inherit;
}

::-webkit-progress-value {
  width: var(--progress);
  height: 100%;
  background: linear-gradient(to bottom, var(--color), var(--dark-color), var(--color));
  box-shadow: 0 0 10px 2px var(--dark-color);
  transition: width var(--speed);
  animation: inherit;
  background-position: inherit;
}

@keyframes shine {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 50px;
  }
}