Animated image gallery preloader

Developer
Creative Punch
Size
2,405 Kb
Views
10,115
  1. Animated image gallery preloader Previews
  2. Animated image gallery preloader HTML Codes
  3. Animated image gallery preloader CSS Codes
  4. Animated image gallery preloader JS Codes

How do I make an animated image gallery preloader?

Animated image gallery preloader using imagesLoaded, jQuery and some basic css. What is a animated image gallery preloader? How do you make a animated image gallery preloader? This script and codes were developed by Creative Punch on 09 December 2022, Friday.

Animated image gallery preloader Previews
IQ Test

Animated image gallery preloader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated image gallery preloader</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="progress-bar"> <div id="progress"></div> <p> <span id="percentage">0%</span> of cute kittens loaded... </p>
</div>
<!-- As an example, I just force a lot of big images here -->
<section id="gallery"> <img src="http://placekitten.com/600/500"> <img src="http://placekitten.com/400/350"> <img src="http://placekitten.com/300/600"> <img src="http://placekitten.com/200/900"> <img src="http://placekitten.com/200/400"> <img src="http://placekitten.com/500/800"> <img src="http://placekitten.com/300/500"> <img src="http://placekitten.com/500/600"> <img src="http://placekitten.com/400/250"> <img src="http://placekitten.com/300/500"> <img src="http://placekitten.com/250/350"> <img src="http://placekitten.com/350/600"> <img src="http://placekitten.com/550/900"> <img src="http://placekitten.com/650/400"> <img src="http://placekitten.com/150/800"> <img src="http://placekitten.com/300/500"> <img src="http://placekitten.com/200/600"> <img src="http://placekitten.com/300/250">
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://imagesloaded.desandro.com/imagesloaded.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated image gallery preloader - Script Codes CSS Codes

body { background: #30303A;
}
#gallery { display: none;
}
#gallery img { height: 300px; display: inline-block;
}
#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;
}

Animated image gallery preloader - Script Codes JS Codes

// Visit http://creative-punch.net for more demos, articles and tutorials
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 = new Number(100 * (countLoadedImages / countImages)); width = width.toFixed(2) + '%'; $('#progress-bar > #progress').css({ 'width' : width }); $('#progress-bar > p > span').html(width); }
});
Animated image gallery preloader - Script Codes
Animated image gallery preloader - Script Codes
Home Page Home
Developer Creative Punch
Username CreativePunch
Uploaded December 09, 2022
Rating 3.5
Size 2,405 Kb
Views 10,115
Do you need developer help for Animated image gallery preloader?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Creative Punch (CreativePunch) Script Codes
Name
Animated CSS3 social buttons
Retro text with hover
Colorful glass menu concept
Glowing lights loader animation with pure CSS
JQuery Adaptive Slider Demo
A Pen by Creative Punch
CSS3 animated sliding box without javascript.
Long shadow social icons with Sass
Sass colorful shadows experiment
3D jQuery rotator
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!