async function CreateStatusBar(siteUrl, ListName, itemId, items, callback) {
showLoader();

  const response = await fetch(`${siteUrl}/_api/web/lists/getByTitle('${ListName}')/items(${itemId})?$select=Status`, {
    headers: {
      Accept: "application/json;odata=verbose",
    },
    }).then(r2 => r2.json()).then(d2 =>{
    
      var AllStatusWrapper = document.createElement("div");
      AllStatusWrapper.style.display = "flex";
      AllStatusWrapper.style.flexDirection = "row";
      AllStatusWrapper.style.alignItems = "center";

      var currentStatus = d2.d.Status;
      debugger;
      var indexOfCurrentStatus = items.indexOf(items.filter(i=> i.Title ==currentStatus)[0]);

      for(var i=0; i<items.length; i++) {


        var statusWrap = document.createElement("div");
        statusWrap.style.position = "relative";
        statusWrap.style.display = "flex";
        statusWrap.style.width = "10rem";

        var statusDiv = document.createElement("div");
        statusDiv.style.width = "100%";
        statusDiv.style.height = "50px";
        statusDiv.style.borderRadius = "7px";
        statusDiv.style.color = "white";
        statusDiv.style.display = "flex";
        statusDiv.style.justifyContent = "center";
        statusDiv.style.alignItems = "center";
        statusDiv.style.padding = "0 30px";
        statusDiv.textContent = items[i].Title;

        var statusCircle = document.createElement("div");
        statusCircle.style.borderRadius = "50%";
        statusCircle.style.border = "2px white solid";
        statusCircle.style.position = "fixed";
        statusCircle.style.zIndex = "10";
        statusCircle.style.width = "28px";
        statusCircle.style.height = "28px";
        statusCircle.style.marginRight = "-10px";
        statusCircle.style.marginTop = "-10px";

        statusCircle.style.display = "flex";
        statusCircle.style.justifyContent = "center";
        statusCircle.style.alignItems = "center";
        statusCircle.style.fontSize = "20px";
        statusCircle.style.color = "white";

        if(i < indexOfCurrentStatus) {
          statusDiv.style.backgroundColor = "#00B050";
          statusCircle.style.backgroundColor = "#00B050";
          statusCircle.innerHTML = "&#10003";
        }
        else if(i > indexOfCurrentStatus) {
          statusDiv.style.backgroundColor = "#DAE3F3";
          statusCircle.style.backgroundColor = "#DAE3F3";
        }
        else if(i == indexOfCurrentStatus) {
          statusDiv.style.backgroundColor = "#00B0F0";
          statusCircle.style.backgroundColor = "#00B0F0";
        }

        statusWrap.appendChild(statusDiv)
        statusWrap.appendChild(statusCircle)

        AllStatusWrapper.appendChild(statusWrap)

        if(i != items.length-1) {
          var arrow = document.createElement("div");

          arrow.style.width = "2rem";
          arrow.style.height = "2px";
          arrow.style.backgroundColor = "#7F7F7F";

          AllStatusWrapper.appendChild(arrow)
        }
      }

      const container = document.getElementById('AllFormTop');

      container.appendChild(AllStatusWrapper);

      callback();

      hideLoader();
    })
}