Sedikit Info Seputar
How to Create Full Screen Preloading Effect
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul How to Create Full Screen Preloading Effect , kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel How to,
Artikel Preloading Effect, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
How to Create Full Screen Preloading Effect
Terbaru
link: How to Create Full Screen Preloading Effect
Berbagi How to Create Full Screen Preloading Effect Terbaru dan Terlengkap 2017
In this tutorial, We will learn how to create full screen simple,clean preloading effect by html/css/image. Sometimes your website contents taking more times to loading. That's can be frustration of your readers. By adding full screen preloading effect, it can reduce readers frustration.
When readers visit your site, they will see it. Then after full website page content load, it will be removed. You can add it anywhere by choosing any image. We created this script by simple way so that you can understand easily. Read from A to Z carefully.
HTML - You need to add following html code after <body> tags
<div id='preloader'>First div id preloader we used for full page screen background color and Second div id status we used for set up image. You will fully understand when you will see css code. You can replace default preloader image url by creating a new one as your like and replace this default image url from html.
<div id='status'>
<img alt='' height='64' src='images/preloader.gif' width='64'/>
</div>
</div>
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #222222;
z-index: 99999;
height: 100%;
}
#status {
position: absolute;
left: 50%;
top: 50%;
width: 64px;
height: 64px;
margin: -32px 0 0 -32px;
padding: 0;
}
Your preloader image size must be 64x64. If your image background color white or other, you can use same color for full page screen from #preloader css code by replacing #222222 background color code.
/*====================================
Preloader
======================================*/
$(window).load(function() {
$("#status").fadeOut("slow");
$("#preloader").delay(500).fadeOut("slow").remove();
})
$("#status").fadeOut("slow"); This code will first fade out the loading animation.
$("#preloader").delay(500).fadeOut("slow").remove(); This code will fade out the whole DIV that covers the website.