CODEWITHSUNDEEP
jqueryhtmlcss
new coder tech
new coder tech

Reputation: 13

Display elements while loading the webpage using jQuery and CSS

small animated images(2 .gif/jpeg images) in center of screen for 10 secs.Then both images should disappear automatically

After that a message should display say "welcome to my site" for 10 secs.Then the message should disappear automatically

At the end, I want to display my webpage.

  <!doctype html>
    <html lang="en">

    <head>
          <meta charset="utf-8"/>
          <title>PreLoadMe</title>


          <!-- Stylesheet -->
          <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen, print"/>

    </head>

    <body>
    <!-- Preloader -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>

    <!-- Your Website Content -->
    <div>This is your website content</div>

    <!-- jQuery Plugin -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

    <!-- Preloader -->
    <script type="text/javascript">
        //<![CDATA[
            $(window).load(function() { // makes sure the whole site is loaded
                $('#status').fadeOut(); // will first fade out the loading animation
                $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
                $('body').delay(350).css({'overflow':'visible'});
            })
        //]]>
    </script> 

    </body>
    </html>


    My css file :-

    @charset "utf-8";
    body {
        overflow: hidden;
    }

    /* Preloader */
    #preloader {
        position: fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color:#fff; /* change if the mask should be a color other than white */
        z-index:99; /* makes sure it stays on top */
    }

    #status {
        width:200px;
        height:200px;
        position:absolute;
        left:50%; /* centers the loading animation horizontally on the screen */
        top:50%; /* centers the loading animation vertically on the screen */
        background-image:url(../img/status.gif); /* path to your loading animation */
        background-repeat:no-repeat;
        background-position:center;
        margin:-100px 0 0 -100px; /* is width and height divided by two */
    }

TIA

Upvotes: 1

Views: 348

Answers (1)

Steve K
Steve K

Reputation: 9055

So you can do this a couple of different ways and I figured I would show you the jquery way and the css animations way. Here are fiddles showing the two ways I used to achieve this effect.

Here is a fiddle for the Jquery Way: Preloader Jquery Fiddle

Here is the fiddle for the CSS Animations Way: Css Animations Fiddle

I started with the following html for both fiddles:

<div class="preloader">
  <span class="first">
    <img src="https://placehold.it/100x100">
    <img src="https://placehold.it/100x100">
  </span>
  <span class="second">Welcome to our site</span>
</div>

Then for the jquery fiddle I used the following CSS and jquery code:

CSS:

.preloader{
  position: fixed;
  top: 0;left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  z-index: 99999999;
  color: #fff;
  text-align: center;
}
.preloader img{
  display: block;
  margin-bottom: 5px;
}
.preloader span{
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.preloader span.second{
  display: none;
}

Jquery:

$(document).ready(function(){
  $('.preloader span.first').delay(10000).fadeOut('slow', function(){ 
    $('.preloader span.first').hide();
  });
  $('.preloader span.second').delay(11000).fadeIn('slow');
  setTimeout(function(){ 
    $('.preloader').fadeOut('slow', function() {
      $('.preloader').remove();
    });
  }, 20000);
});

And for the Css Animations Way I used the following Css and Jquery Code:

Css:

.preloader{
  position: fixed;
  top: 0;left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  z-index: 99999999;
  color: #fff;
  text-align: center;
}
.preloader img{
  display: block;
  margin-bottom: 5px;
}
.preloader span{
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: fade-out 10s linear; /* Safari 4+ */
  -moz-animation:    fade-out 10s linear; /* Fx 5+ */
  -o-animation:      fade-out 10s linear; /* Opera 12+ */
  animation:         fade-out 10s linear; /* IE 10+, Fx 29+ */
}
.preloader span.second{
  animation-delay: 10s;
}
@-webkit-keyframes fade-out {
  0%   { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes fade-out {
  0%   { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@-o-keyframes fade-out {
  0%   { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fade-out {
  0%   { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

Jquery:

$(document).ready(function(){
  setTimeout(function(){ 
    $('.preloader').fadeOut('slow', function() {
      $('.preloader').remove();
    });
  }, 20000);
});

Hope this helps I just figured I would give you a couple of different options as to how you wanted to achieve this. The Jquery way will probably have the most browser support but most browsers support css animations now so that is a very good option as well.

Upvotes: 2

Related Questions