progress bar

using data-attr for animation-duration

by irinablue

HTML

<div id="progress" class="progress" data-timer="5s">
  <span class="line"></span>
</div>

CSS

.progress {
            position: relative;
            background: #fff;
            display: flex;
            height: 100px;
            width: 100%;
}
        .progress .line {
            position: absolute;
            animation-name: load;
            animation-timing-function: ease-out;
            background: #1976d2;
            height: 100%;
            width: 0;
        }
        @keyframes load{
            0 {width: 0}
            100% {width: 100%}
        }

JavaScript

let progressEl = document.getElementById('progress');
if (progressEl) {
  let timer = progressEl.dataset.timer;
  if (timer) {
      document.getElementsByClassName('line')[0].style.animationDuration = timer;
  }
}