progress-bar_implement

index.html

<div class="container">
  <div class="progress-bar"></div>
</div>
<button onclick="loadBar()">Load</button>

progress-bar_implement.markdown

progress-bar_implement

A Pen by Demetrios Kalcassinas on CodePen.

License.

script.js

const bar = document.querySelector('.progress-bar');

function loadBar () {
  bar.classList.add('load');
}

style.css

.container {
  width: 300px;
  height: 50px;
  background-color: #D3D3D3;
}

.progress-bar {
  width: 0%;
  height: 50px;
  background-color: #90EE90;
  transition: width 3s linear;
}

.load {
  width: 100%;
}