Animated image gallery preloader
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 - 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); }
});
Developer | Creative Punch |
Username | CreativePunch |
Uploaded | December 09, 2022 |
Rating | 3.5 |
Size | 2,405 Kb |
Views | 10,120 |
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!
Name | Size |
Animated bar chart | 3,124 Kb |
A Pen by Creative Punch | 2,368 Kb |
3D jQuery rotator | 3,238 Kb |
CSS3 animated sliding box without javascript. | 2,554 Kb |
Textured text | 1,947 Kb |
Colorful glass menu concept | 3,022 Kb |
Glowing lights loader animation with pure CSS | 2,785 Kb |
Gradient text with CSS3 | 2,032 Kb |
SVG blurred header | 3,102 Kb |
JQuery Adaptive Slider Demo | 3,568 Kb |
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!
Name | Username | Size |
Adding Items | Valhead | 4,008 Kb |
A Pen by Stan Williams | Stanssongs | 6,706 Kb |
Random Gradients - JS | Aldlevine | 2,026 Kb |
Responsive slide | Thorien | 2,400 Kb |
Click handler test | Snapson | 2,329 Kb |
A Pen by Adrien Clerbois | AClerbois | 6,501 Kb |
Nested flexbox layout for library catalog | Boycetrus | 3,271 Kb |
JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
Obligatory CSS3 UI Nav | Romandiaz | 9,017 Kb |
Clock with full screen background | Owebboy | 2,415 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!