how do I create bootstrap progress bar using vanilla JS and if not vanilla than something

Question

Having this code

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  progressBarElemdiv class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

from here https://getbootstrap.com/docs/4.3/components/progress/

I want create the same progressBar using js only

I started with

progressBarElem = document.createElement("div");
progressBarElem.className = "progress-bar"
progressBarElem.setAttribute("role","progressbar")
progressBarElem.setAttribute("aria-valuenow",70)
progressBarElem.style.width = 50 + '%';
progressBarElem.setAttribute("aria-valuemin",0)
progressBarElem.setAttribute("aria-valuemax",100)
progressBarElem.setAttribute("aria-valuemax",100)
progressBarElem.style.width = 200
progressBarElem.style.height = 50
progressBarElem.textContent = "Sss"
document.querySelector(".body").appendChild(progressBarElem)
console.log(progressBarElem);

but I still have a lot of attributes to set and some transion and it getting very messy, is there a quicker way?

Answer 1

may be this ?

=HTML=

<div id="Hidden-Elements" style="display: none">
  <div class="progress-bar" role="progressbar" style="width: 50%" 
       aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

=JS=

const progressBarElem = document.querySelector('#Hidden-Elements div.progress-bar').cloneNode(true)

document.querySelector(".body").appendChild(progressBarElem)