A simple example of how you can slowly change the opacity of an html element using a promise chain.

promise_chaining.js

// html has some element with the id heading
// <h1 id="heading">IM FADING IN</h1>

window.onload = () =>{
  heading = document.getElementById("heading");
  create_await_chain(heading);
}

function create_await_chain(fade_object, depth=0){
  // Creates a promise chain to slowly load the bar
  if (depth < 100){
    return new Promise((resolve, reject)=>{
      setTimeout(() => {
          fade_object.style.opacity = depth / 100);
        }
        resolve();
      }, depth * 30);
    }).then(create_await_chain(fade_object, depth+1))
  }
  return;
}