Preloaders are loading screen before opening website and they are mainly used in heavy websites wich takes time in loading. They make webpage user interactive while page in loading. Even now a days light websites are also using loaders for people having slow internet connection.
Preloaders also gives an professional look to website. Users also like these kind of loaders at place of blank white screen coming while loading.
Today we are going to know how to add a loader in website.
You can use any infinity loop GIF for loader. Even you can make a loader using CSS but today we are just going to learn how to add loader in website.
Steps:
1• Make a div in your website's body tag.
| <div id="loading"></div> |
2• Write this command in body tag.
| <body onload="loadingFunction()"> |
3• Add this CSS code in your website's style tag.
| position: fixed;
width: 100%;
height: 100vh;
background: #fff
url('file path')
no-repeat center center;
z-index: 99999;
}
#infinity loop GIF path at place of file path |
4• Make a script tag in head tag or footer tag of your website and wright the following code there.
| <script> var preloader = document.getElementById("loading"); function loadingFunction(){ preloader.style.display = 'none'; }; </script> |
Please let me know did it helped you or not. And if you have any queries please ask in comments.
0 Comments