CSS3 Preloader Animation for only User Agent supports it

September 30, 2011

Hello guys, in the previous tutorial CSS3 Loading Animation, we have seen how to create loading animations using only CSS3, today we will see how to implement them and make them display only in versions of browsers that support CSS3 animations, which in this case, Firefox, Safari and Chrome.

If javascript is disabled don’t worry the content is always visible.

Let’s start!

The Markup

HTML

This time the markup will result neat because we will go to add the preloader directly with jQuery, then in this step created a simple div container and inside insert the content of your website!

<div class="container">
/* Insert your content */
</div>

CSS

Here you can create your own style, use your creativity, here we propose again the animation of the bar that runs entire width of the screen.

#preloader {
    width: 100%;
    height: 5px;
    background: #000;
    top: 50%;
    position: absolute;
}

.expand {
    width: 100%;
    height: 1px;
    margin: 2px 0;
    background: #2187e7;
    position: absolute;
    box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7);
    -moz-animation: fullexpand 2000ms cubic-bezier(1.000, 0.610, 0.970, 0.000);
    /* Set the duration of the animation */
	-webkit-animation: fullexpand 2000ms cubic-bezier(1.000, 0.610, 0.970, 0.000);
}

@-moz-keyframes fullexpand {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    };
}

@-webkit-keyframes fullexpand {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    };
}

jQuery

The first step is to call the jQuery file.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.6.4.min.js"></script>

Create a new script tag and insert the code.

$(document).ready(function(){
var ua = $.browser; /* Create a variable for browser info */
$('.container').hide(); /* Hide the content */

/* If the Version or Firefox is < or = 5.0 the preloader not display, 
    the same function applies to old Version Safari and Chrome
    and finally Opera and IE they don't support CSS3 Animation */
if (ua.mozilla && ua.version <='5.0' || ua.safari && (navigator.appVersion.indexOf('3.') != -1) || ua.opera || ua.msie){
    /* If the condition is true the content will be displayed immediately */
    $('.container').show();
}
else {  /* Otherwise appears the preloader */
    /* Insert the markup preloader usign jQuery */
    $('body').append('<div id="preloader"><span class="expand"></span></div>');
    /* The animation during 2sec, 
            change the delay parameter to extend or decrase the animation, 
            remember to change the duration of the animation also in CSS */
    $('#preloader').delay(2000).fadeOut('slow', function() {
    $('.container').fadeIn('fast');  
});  	
}
});

The Logic

  1. $.browser
    The $.browser property provides information about the web browser that is accessing the page, as reported by the browser itself.
    For more information see here $.browser
  2. Check the version of your browser
    Thanks to if statement we can see that the browser is in use and if it does not support CSS3 animations, will appear the content of the website!
  3. .delay()
    Setting the delay to finish the duration of the animation so that it can appear the content of the website, so always remember to set the delay by the duration of the animation in the CSS style.

Conclusion

We have seen how to display a fake preloader based on the browser in use, and if javascript is disabled the website content is always visible.