1

I have a page loading script that swpas between two dives (giving the illusion of moving from a loading screen to a homepage). The functions uses the classie library to do some off the cuff swap outs of classes via a trigger (in this case a button/link)

I want to include a small loader that I have but only after the button is click (triggerLoading) so this loader would need to appear below loadingSVG.show();

The problem is I'm not quite sure how to include this laoder. Here is the code.

My current page swap script using Classie

(function() {
            var pageLoaderWrap = document.getElementById( 'pagewrap' ),
                pagesLoader = [].slice.call( pageLoaderWrap.querySelectorAll( 'div.client-homepage' ) ),
                currentPageLoader = 0,
                body = document.body,

                triggerLoading = [].slice.call( pageLoaderWrap.querySelectorAll( 'a.pageload-link' ) ),                    
                loaderSVG = new SVGLoader( document.getElementById( 'loader' ), { 
                    speedIn : 300, 
                    easingIn : mina.easeinout 
                } );

            function pageSwap() {
                triggerLoading.forEach( function( trigger ) {
                    trigger.addEventListener( 'click', function( ev ) {
                        ev.preventDefault();
                        loaderSVG.show();

                        setTimeout( function() {
                            loaderSVG.hide();
                            classie.removeClass( pagesLoader[ currentPageLoader ], 'show-page' );
                            classie.addClass (pagesLoader[currentPageLoader], 'page-hide');
                            classie.removeClass(body, 'scrolling');
                            currentPageLoader = currentPageLoader ? 0 : 1;
                            classie.addClass( pagesLoader[ currentPageLoader ], 'show-page' );
                            }, 5000 );
                        });
                }); 
            }
            pageSwap();                  
          })();

Here is the small loader I want to include

    $(function () {
        $('.waveLoader').loader();
        var progr = 1;
        setInterval(function () {
            $('.waveLoader').loader('setProgress', ++progr);
            }, 100);
        });

The reason I want to include this only on the trigger statement is because if you don't the animation of the loader starts when the page loads instead of when the link is clicked on.

Cheers

Yanayaya
  • 2,044
  • 5
  • 30
  • 67

0 Answers0