Как запустить анимацию загрузки после нажатия на кнопку?

Question

#download {
  position: absolute;
  top: 50%;
  left: -100%;
  height: 10px;
  width: 100%;
  background-color: green;
}

#download.download-active {
  animation: download 5s steps(50) 1 forwards;
}

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

<button class="download">Загрузить</button>
<div id="download"></div>

Answer 1

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.download').addEventListener('click',
    function() {
      document.querySelector('#download').classList.add("download-active");
    })
});

#download {
  position: absolute;
  top: 50%;
  right: 0;
  left: -100%;
  height: 10px;
  width: 100%;
}

#download.download-active {
  animation: download 4s steps(10) 1 forwards;
}

@keyframes download {
  0% {
    left: -100%;
    background-color: palegreen;
  }
  50% {
    left: 0px;
  }
  99% {
    background-color: green;
  }
  99.99% {
    left: auto;
    display: none;
  }
}

<button class="download">Загрузить</button>
<div id="download"></div>

БЛОГ НА HUSL

Как запустить анимацию загрузки после нажатия на кнопку?

Ответы (1 шт):