Categories
Uncategorized

Loader ES6

The following is the implementation of a simple Javascript (ES6) loader.

<script>
  const load = () => {
    let width = 0;
    const id = setInterval(() => {
      if (width === 100)
        clearInterval(id);
      else
        document.getElementById('bar').style.width = `${++width}%`;
    }, 10);
  };
</script>
<div id="loader" style="height: 100px; width: 600px; border: 1px solid #000;">
  <div id="bar" style="background-color: green; width: 0; height: 100px;" class="">
  </div>
</div>
<button onclick="load()">Load</button>

Demo