News

Use CSS to create a killer preloader

Discover how to code engaging preloaders to keep visitors on your site

racer02

Screen shot 2014-12-23 at 17.03.57

INSPIRATION: www.makeyourmoneymatter.org

New York-based digital agency Firstborn, were approached by PSCU who wanted to introduce community-minded people of the 21st Century to the benefits of credit unions over big banks.

In response to this, Firstborn launched the “Make Your Money Matter” campaign to highlight the positive social impact that joining a credit union can make. The heart of the campaign is the online hub, where an interactive narrative experience pushes the boundaries of digital storytelling. The illustrated story follows the journey of a typical deposit through big banks in comparison to a journey with credit unions. The story is one that is told through the use of web technology and fantastic illustrations.

DOWNLOAD TUTORIAL FILES

Get started

In the body section of the page add the divs shown below. There is one for the preloader which will hide the site content while it loads, we will add some animated clouds inside of this later. Below we’ve added links to HD wallpapers to simulate a download.

001 <div class=’preloader’>.
002           <div class=”clouds”></div>
003        </div>
004        <div>
005            <img src=’http://www.hdwallpapersinn.com/wp-content/
uploads/2014/08/5TG794xTx.jpg’/>
006            <img src=’http://www.
hdwallpapersinn.com/wp-content/uploads/2014/08/desktop-backgrounds-8124-8572-hd-wallpapers.jpg’/>
007        </div>

Add the CSS

In the head section of the page add the CSS shown which will set the page background colour. Then place the preloader above the rest of the page with a background colour so that it hides the loading.

001 <style>
002        html,body {
003            background: #e8e6c2;
004            padding: 0;
005            margin: 0;
006            text-align: center;
007        }
008        .preloader {
009            display: block;
010            position: fixed;
011            width: 100%; height: 100%;
012            z-index: 9999; top: 0;
013            background: #e8e6c2; 
014        }

Animate the clouds

Now we will add some clouds inside of the preloader, we will animate this later from JavaScript by moving the background position of the image. Note how the image is set to repeat as this will continuously scroll the background. We make the corners of this round with the border-radius property.

001    .clouds{
002               background:url(img/clouds.
jpg) repeat 0 bottom;   
003               width:300px; height:300px;
004            margin: 0 auto;
005            display: block;
006     border-radius: 50%;
007     position: relative;
008     top: 50%;
009     transform: translateY(-50%);
010        }
011        </style>

Start the JS

We now create a link to the jQuery library and then we set the properties for our scrolling. The function ‘bgscroll’ handles the movement of the background position by manipulating CSS properties.

001    <script type=”text/javascript” 
src=”http://ajax.googleapis.com/ajax/libs/
jquery/1.10.1/jquery.min.js”></script>
002            <script>
003                var scrollSpeed = 30;
004                var current = 0;
005                var direction = ‘h’;
006                function bgscroll(){
007                current -= 3;
008                $(‘div.clouds’).
css(“backgroundPosition”, (direction 
== ‘h’) ? current+”px 0” : “0 “ + 
current+”px”); }

Check the loading

We use the JavaScript command to setInterval to call the bgscroll function. Finally we detect if the window has finished loading, when it has we fade out the preloader so the rest of the page is fully visible in the browser window.

001    setInterval(bgscroll, scrollSpeed);
002                $(window).load(function(){
003                     $(‘.preloader’).fadeOut();
004                });
005            </script>
006    setInterval(draw, 25);
007    </script>
×