Loader/Throbber/Spinner
Essentially, pre-loaders (also known as loaders) are what you see on the screen while the rest of the page's content is still loading. Pre-loaders are often simple or complex animations that are used to keep visitors entertained while server operations finish processing.
In this tutorial, I have used SVG (Scalable Vector Graphics) for pre-loading animation. It's resolution independent and responsive. Images can be scaled the same way we scale all other elements in responsive web design.
So, to design the SVG, I have used Figma which is used for web-based graphics editing and user interface design app.
After editing and importing your frame as SVG, you now need to animate it. For basic animations, you can either use svgartista or svgator. If you want your own custom animations you can do it by using @keyframes in CSS.
This is a Pre-loader Pen, which I created using above methods and used it in my own portfolio website.
Now, how do we add this on our website?
Follow these steps to add a pre-loader
- Create a
loader.htmlandloader.cssfile and copy over the code for both HTML and CSS and then create a wrapper around it.
HTML
<div class="loader-wrapper">
<div class="loader"> <svg /*svg code*/></svg></div>
</div>
CSS
.loader-wrapper {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: whitesmoke;
display: block;
justify-content: center;
align-items: center;
z-index: 999;
overflow: hidden;
}
If done correctly, this is what you should get.
Load Event
The loading Animation is ready. Next we’ll need hide it when the loading is complete. We can do that by listening to window load event which will trigger when all the elements have been completely loaded. Then use jQuery fadeOut method to hide the loader.
Make sure you have jQuery included in your project.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
Then to include loading animation page in your other HTML document use a div tag with id="loading".
<body>
<div id="loading"></div>
</body>
In CSS file, import loader.css using
@import url(/assets/css/loader.css);
In JavaScript file, you have to call loader.html using
$.get("/assets/html/loader.html", function(data){
$("#loading").replaceWith(data);
});
Then to trigger the loading animation everytime you load a page use this code:
$(window).on('load', function(){
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
$( ".loader-wrapper" ).fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$( ".loader-wrapper" ).remove(); //makes page more lightweight
});
}
And that’s it! Very simple and straightforward😉✌
Top comments (4)
In your CSS, the wrapper should be display: flex; instead of block. Also, since a lot of websites don't want to use jQuery anymore, it would be nice to have a Vanilla JS explanation. Other than that, cool guide :)
Thank You!!
Yupp, will work on that 👍🏻
Interesting. I've never heard them called 'pre-loaders' before (or 'loaders' for that matter). I've always known them as 'throbbers' or 'spinners'.
The word 'Loader' implies that they're loading something - which isn't necessarily the case (the running process may not even be contacting the server). Probably not the best name TBH
Well yaaa...it's just for a static web page..to add aesthetics. I was searching online for tutorials, didn't find any, so figured it out on my own.
And thank you for the suggestion :) 👍🏻