Простая панель загрузки

Question

Я пытаюсь сделать простую панель загрузки, но получается только сплошной цвет без переходной анимации.Кроме того, «повторяющийся линейный градиент» не работает, и я не могу понять, почему.

Я надеюсь на вашу помощь.Спасибо!

.Download {
  height: 80px;
  width: 1000px;
  border: 2px solid black;
  border-radius: 100px;
  /*background: repeating-linear-graient (90deg, blue, red, 100px);*/
  background: linear-gradient(to left, blue, red);
  animation-name: download;
  animation-direction: 10s;
  animation-timing-function: linear;
  animation-direction: normal;
}

@keyframes download {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

<div class="Download">
</div>

Answer 1

Вам нужно сделать половину линейного градиента прозрачным (список битов, чтобы предотвратить дыру в конце).Установите положение фона x на 100%, чтобы представить только прозрачную часть.Тогда анимация до 0:

.Download {
  height: 80px;
  width: 1000px;
  border: 2px solid black;
  border-radius: 100px;
  background: linear-gradient(to right, red 0, blue 50.02%, transparent 50.02%) no-repeat;
  animation: download 10s forwards;
  background-position: 100% 0;
  background-size: 200% 100%;
}

@keyframes download {
  to {
    background-position: 0 0;
  }
}

<div class="Download">
</div>

Answer 2

Для этого вы можете использовать псевдокод.

.Download {
  height: 80px;
  width: 1000px;
  border: 2px solid black;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
}

.Download:after {
  content: "";
  position: absolute;
  background-image: linear-gradient(to left, blue, red);
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  animation: download 5s;
}

@keyframes download {
  0% {
    left: -100%;
  }
  100% {
    left: 0%;
  }
}

<div class="Download">
</div>