Refactoring redundant JS logic for "Instagram-Story pagination"

Question

I'm working on a website which uses fullpage.js and has a section with several slides. The slides switch automatically every 10 seconds.

I wanted to create those bars like Instagram has them, that slowly fill up. When one bar is filled, the viewport changes to the next page and the next bar starts to fill itself. And when the user manually switches slides the according bar should start animating.

I didn't find anything online so I built it from scratch and after some attempts I got it working as I wanted. BUT the code ist horrible.

I am 100% sure it is possible to bring it down to a few lines but as I'm not skilled enough to refactor it that way. How could this function be solved in a better way, with less code? Any help would help me a lot to learn here.

Here's the relevant code I wrote (It won't work properly, because it's based on the URL, but I'm sure you'll get how it would work with the correct URL)

function locationHashChanged() {
  if (location.hash === '#page2') {
   document.getElementById("Loadingbar-2-1").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
   document.getElementById("Loadingbar-2-2").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-3").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-4").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-5").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-6").setAttribute("style","width:0%");
  } else if (location.hash === '#page2/1') {
   document.getElementById("Loadingbar-2-1").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-2").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
   document.getElementById("Loadingbar-2-3").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-4").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-5").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-6").setAttribute("style","width:0%");
  } else if (location.hash === '#page2/2') {
   document.getElementById("Loadingbar-2-1").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-2").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-3").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
   document.getElementById("Loadingbar-2-4").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-5").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-6").setAttribute("style","width:0%");
  } else if (location.hash === '#page2/3') {
   document.getElementById("Loadingbar-2-1").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-2").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-3").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-4").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
   document.getElementById("Loadingbar-2-5").setAttribute("style","width:0%");
   document.getElementById("Loadingbar-2-6").setAttribute("style","width:0%");
  } else if (location.hash === '#page2/4') {
   document.getElementById("Loadingbar-2-1").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-2").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-3").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-4").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-5").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
   document.getElementById("Loadingbar-2-6").setAttribute("style","width:0%");
  } else if (location.hash === '#page2/5') {
   document.getElementById("Loadingbar-2-1").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-2").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-3").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-4").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-5").setAttribute("style","width:100%");
   document.getElementById("Loadingbar-2-6").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
  }
}  

window.onload = locationHashChanged;
window.onhashchange = locationHashChanged;

.loading-bars-container {
    position: absolute;
    left: 48px;
    right: 48px;
    bottom: 0.5em;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.storyindicator {
    position: relative;
    z-index: 1000;
    overflow: hidden;
    width: 20%;
    height: 4px;
    margin-right: 0.25em;
    margin-left: 0.25em;
    border-radius: 4px;
    background-color: #000;
}

.loadingbar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: grey;
}

<div class="loading-bars-container">
   <div class="storyindicator">
      <div id="Loadingbar-2-1" class="loadingbar-fill" style="width:100%"></div>
   </div>
   <div class="storyindicator">
      <div id="Loadingbar-2-2" class="loadingbar-fill" style="width:100%"></div>      </div>
   <div class="storyindicator">
      <div id="Loadingbar-2-3" class="loadingbar-fill" style="width:100%"></div>      </div>
   <div class="storyindicator">
      <div id="Loadingbar-2-4" class="loadingbar-fill" style="animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;"></div>      </div>
   <div class="storyindicator">
      <div id="Loadingbar-2-5" class="loadingbar-fill" style="width:0%"></div>        </div>
   <div class="storyindicator">
      <div id="Loadingbar-2-6" class="loadingbar-fill" style="width:0%"></div>        </div>
</div>

Answer 1

If you want the code to be shorter (sometimes it's totally OK for code to be verbose), I would propose this:

const animationStr = "animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;";
const barsCnt = 6;

function locationHashChanged() {
  const num = location.hash.match(/^#page2(?:\/(\d))?$/)[1] || 0;
  
  for (let i = 0; i < barsCnt; i++) {
    const style = i < num
      ? "width:100%"
      : i > num
      ? "width:0%"
      : animationStr;
    
    document.getElementById("Loadingbar-2-" + (i + 1)).setAttribute("style", style);
  }
}

window.onload = locationHashChanged;
window.onhashchange = locationHashChanged;

I tested it, but there still may be some flaws, please check it.