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="http://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.

7 Comments

  1. Using the UA to detect whether a feature is available is not reliable, new applications will be updated to support it and will be left out. Either use Modernizer or use directly test the feature you’re looking to use.

  2. Oops, I sent that too fast. I didn’t realize this whole thing is wrong on so many levels: CSS transitions would be enough, they would be easier write and would have a greater support; you should use events to detect the completion of the transition rather than using a delay; last, but definitely not least, you’re stopping the user for 2 seconds flat whether the content has been loaded or not, so it’s not a preloader. If you want a bar that shows the actual loading progress of the page you would have to take into consideration all the onload events of the images (and perhaps other external elements) on the page and the ones in the CSS, and end the animation on page load—definitely not as easy, but someone has done it.

    • I don’t think whether he is successful, has only changed the CSS Style of plugin QueryLoader, my goal would be to use only CSS to make a preloader although this seems impossible without javascript.
      I have also written that this is a fake preload, and the purpose was only to use the animations in CSS3.

  3. woow! this is amazing bluxart..

    how about the google crawling? did this trick bad for seo.?

  4. This tutorial is nice, but I presume it will increase bounce rate. Still, it could be useful to display it while an image gallery is loading.

    Theoretically Google can punish you for hiding content (don’t know if it does if only for a few seconds) because they can interpret javascript.

  5. Loki Lust

    I love this tutorial but how do i get it to work with Bootstrap ?

    The javascript conflicts with Bootstrap javascript ?

Leave a Reply