Как правильно реализовать анимацию для загрузки формы

#javascript #jquery #ajax #css3

При отправке формы пользователю будет показываться анимация загрузки: прямоугольник,
который заполняется цветом.
https://codepen.io/Raneto4ka/pen/roKgaj

Сейчас время работы анимации фиксированная, 
animation: loader-inner 6s linear  forwards;
но она не всегда будет одинакова и зависит от разных факторов, так что заранее неизвестна.
Вопрос: как это вообще правильно делать если мы знаем текущее состояние, т.е. x%
из 100 - готово. Т.е. мне надо строить анимацию прогресс бара не на основе её длительности,
а текущего состояния.
Буду благодарна за любую подсказку.
    

Ответы

Ответ 1

Не обязательно знать сколько времени займет загрузка. Между ее "скачками" css будет
анимировать прогресс-бар за заданное в нем количество времени. В моем случае каждый
скачек производится каждые 1500 мс., а анимация от одного состояния до другого занимает
одну секунду, как это задано в css. В самом конце, когда progress === 100 можно заметить,
что анимация идет от состояния progress === 100 до progress === 0, но и этот относительно
большой скачек занимает одну секунду.



let progress = 0; // 0 - 100

let int = setInterval(() => {
  document.getElementById("progress").style.width = progress + "%";

  progress += 20;
  progress = progress > 100 ? 0 : progress;
}, 1500);
#wrapper {
  position: absolute;
  width: 200px;
  height: 30px;
  background: gray;
}

#progress {
  position: absolue;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: blue;
  
  transition: all 1s linear;
}

  




Ответ 2

Ну если вы знаете текущее состояние, то можно слегка переделать прогресс-бар.



function loader(perc) {
	$(".loader-inner").height(perc + "%");
}

// эмуляция текущего состояния для демонстрации
var currentPerc = 0;
setInterval(function () {
  var min = 5, max = 25;
  if (currentPerc == 100) {
    currentPerc = 0;
  } else {
    currentPerc += Math.floor(Math.random() * (max - min + 1)) + min;
    if (currentPerc > 100) currentPerc = 100;
  }
	loader(currentPerc);
}, 500);
.wrapper-spinner {
	height: 100vh;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.loader-spinner-progress {
	position: relative;
	display: block;
	transform: rotate(180deg);
	width: 70px;
	height: 71px;
	border: 4px solid #C3CCD7;
	border-radius: 7px;
	overflow: hidden;
}

.loader-inner {
	position: relative;
	display: block;
	width: 100%;
	background-color: #C3CCD7;
	height: 0;
	transition: height 0.25s ease-in;
}