Make an animated image gallery percentage preloader with CSS and jQuery



When you know you have a lot of images to load, or that they are big in size, it can be handy to make a preloader! So let’s make an animated image gallery percentage preloader with CSS and jQuery.

Demo and source of the loading bar are available here:

Something like this can be made really simply with imagesLoadedimagesLoaded is a nice JavaScript library/jQuery plugin.

I prefer to use it as a jQuery plugin, however it can be used without jQuery. All you need is the one file.

The HTML

Let’s look at the HTML for this example.

<div id="progress-bar">
  <div id="progress"></div>
  <p>
    <span id="percentage">0%</span> of cute kittens loaded...
  </p>
</div>

<section id="gallery">
  <!-- Some images go in here -->
</section>

The progress bar is really simple. It consists out of a wrapper div, an inner div, and some text for displaying the percentage that it’s completed.

Later on, we will hide the progress bar and show the gallery once everything has loaded.

The CSS

We need to hide our gallery by default and tile our images a bit.

#gallery {
  display: none;
}

#gallery img {
  height: 300px;
  display: inline-block;
}

Next we add some general styling for the progress bar. You can do with this whatever you like really. I chose for a flat bordered progress bar. The inner element will go from 0% in width to 100%.



#progress-bar {
  height: 30px;
  display: block;
  width: 300px;
  margin: 0 auto;
  background: transparent;
  padding: 5px;
  margin-top: 150px;
  border: 3px solid #00a6ff;
  text-align: center;
  position: relative;
}

#progress-bar > #progress {
  width: 0%;
  height: 100%;
  background: #00a6ff;
}

#progress-bar > p {
  vertical-align: middle;
  display: inline-block;
  color: white;
  font-weight: bold;
  margin: -50px auto 0;
}

The JavaScript

Now for the best part, the JavaScript!

We can use imagesLoaded’s events to both update the progress bar and hide it/show the gallery when everything has loaded.

We’ll be making use of the always and progress events. We will use progress to update the progress bar as each image loads. We will then use the always event which will fire when all images have loaded.

We will need to divide the total images with the images that have loaded in order to calculate the percentage that our preloader will get. We will then update the width and the number of the progress bar.

var countImages = $('#gallery img').size();

$('#gallery').imagesLoaded()
.always( function( instance ) {
  $('#progress-bar').fadeOut(function() {
    $('#gallery').fadeIn();
  });
})
.progress( function( instance, image ) {
  if(image.isLoaded) {
    $(image.img).addClass('loaded');

    var countLoadedImages = $('#gallery img.loaded').size();

    var width = 100 * (countLoadedImages / countImages) + '%';

    $('#progress-bar > #progress').css({
      'width' : width
    });

    $('#progress-bar > p > span').html(width);
  }
});

That’s it!

I hope you have enjoyed this example, feel free to share it on your favorite social media or show me your take on this example!

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+19Share on StumbleUpon1Share on Reddit1Share on LinkedIn0Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!