Its a great idea to show a cool animated image until your website is loading? Of Course, it will improve your site’s user experience.
Almost all the latest themes on Themeforest come with preloaders. Adding preloader will display a loading animation until the page has been completely loaded.
In this tutorial, I’ll show you the simplest way for adding preloaders to a website using only jQuery and CSS.
<div class="loading">
<div class="loader"></div>
</div>.loading{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
z-index: 999;
background-color: #ffffff;
}.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
}
@keyframes spin {
v
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript">
$(window).load(function() {
$(".loading").fadeOut("slow");
});
</script>Demo here: Demo
Download from: Download
Studio Ghibli is famous for its beautiful, hand-painted animation style with soft colors, dreamy landscapes,…
When creating a website, choosing the right Content Management System (CMS) is crucial. There are…
If you’re building a WordPress website, you’ll need plugins to add important features like contact…
Selecting a best WordPress theme may be a small detail, but it has a big…
WordPress is one of the most popular content management systems (CMS) in the world, but…
WordPress speed optimization is one of the most important factors in user experience and SEO.…