CODEWITHSUNDEEP
javascriptjquery
BubblewrapBeast
BubblewrapBeast

Reputation: 1607

Creating a Loading Screen that disappears after x time on button click

I was wondering if it was possible to add a "loading screen" that could be an overlay that shows up when a user clicks on specific link on my site. External links that will take the user offsite. Would it be possible to have a loading screen appear when the link/button is clicked that appears for 2-3 seconds then starts to load the destination URL?

I have tired using my tiny knowledge of JQuery but I can't seem to find a way.

Thanks!

Upvotes: 1

Views: 2523

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Check the following example using setTimeout to waiting 2 seconds before opening the external link :

$(function(){

    $('body').on('click', '#external-link', function(e)
    {
        e.preventDefault();

        var link = $(this).attr('href');
        
        $('body').append(
            '<div id="overlay">' +
            '<img id="loading" src="http://bit.ly/pMtW1K">' +
            '</div>'
        );
        
        setTimeout(function(){
          $('#overlay').remove();
          window.open( link );
        }, 2000); //2 seconds
    });

})
#overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
#loading {
    width: 50px;
    height: 57px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -28px 0 0 -25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://google.com" id="external-link">External link</a>

Upvotes: 2

Chris Davis
Chris Davis

Reputation: 431

This can be done without relying on jQuery or any 3rd party libs. Wire up an event listener on your external links, apply a loading overlay and use a setTimeout() to insert your artificial delay.

var delay = 2000;
var els = document.getElementsByClassName('external-link');
var loader = document.getElementById('loading');

for(var i = 0;i < els.length;i++){    
    els[i].addEventListener('click', function(e) {  
        var source = e.target || e.srcElement;
        e.preventDefault();        
        loader.className = loader.className.replace('hidden', '');
        
        setTimeout(function() {             
            window.open(source.href);            
            loader.className += 'hidden';
        }, delay);
    }, false);
}
.hidden {
    display:none;
}
.loader {
    position:fixed;
    height:100%;
    width:100%;
    background-color: grey;
    opacity:0.5;
}
.loader-text {
    position:fixed;
    top:45%;
    left:45%;

}
<div class="loader hidden" id="loading">
    <span class="loader-text">Loading...</div>
</div>

<div>
    Website Content
    <a href="http://google.com" class="external-link">Click me!</a>
    <a href="http://yahoo.com" class="external-link">Or me!</a>
</div>

jsFiddle: http://jsfiddle.net/sysnull/t93ydLgy/3/

Upvotes: 1

Related Questions