Display Loading Animation Preloader Bars On Button Click

Question

I've used similar code to display an indeterminate progress bar on my button but now that I'm trying to just make the preloading bars appear, but they should not be visible before click. I want to trigger the animation on the button click to open the gallery or hide the loading animation until the click occurs.

The gallery can take 2-10 seconds to load so this button animation plays until the new page loads.

I think it may be the names of the elements as I've put several pieces of code together (originally ladda based preloader examples) and the bars are new. And the data loading I expect to hide the bars before click isn't working.

Thanks for any advice or recommendations!

.button[data-loading]

Codepen: https://codepen.io/admecoach/pen/NQwrOg

Objective is to have the large button clicked and then the bars animation begin playing to the right of the text until the new page loads. And all resets (no color progress bars visible) in appx 10 seconds in case the page doesn't load and the button needs to be clicked again.

Answer 1

You have a closing <span> tag outside it's parent <a>, as well as the JS script is repeated twice. The document.querySelectorAll() is looking for an element with the class of .button but you have your element with a class of .ladda-button. The .loading span should be hidden by default, and you need a CSS selector [data-loading] to show the .loading element. Please see link below to updated codepen that works as expected.

https://codepen.io/npfries/pen/XvzRqR