I'm currently developing a website that utilizes fullpage.js and includes a section with multiple slides. These slides automatically transition every 10 seconds.
I wanted to implement progress bars similar to those on Instagram, where each bar fills up gradually. When one bar is filled, the viewport switches to the next slide and the next bar begins filling up. Additionally, when a user manually navigates between slides, the corresponding bar should start animating.
After not finding any suitable solutions online, I decided to build it from scratch. Although I eventually got it working as intended, the code turned out to be quite messy.
I am confident there must be a more concise way to achieve this functionality, but my current skill level doesn't allow me to refactor the code effectively. I would greatly appreciate any assistance in optimizing this function with less code to aid in my learning process.
Below is the relevant code snippet I've written (please note that it may not function properly due to being based on the URL, but you should be able to grasp 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') {
// Update styles accordingly
}
// Add additional condition checks here
}
window.onload = locationHashChanged;
window.onhashchange = locationHashChanged;