نمایش Loading هنگام بارگذاری سایت

با سلام خدمت دوستان و همراهان سایت چسبون. دراین پست آموزشی قصد داریم نحوه نمایش لودینگ هنگام بارگذاری سایت را به شما آموزش دهیم.

حتما دیدید که در بسیاری از سایت ها هنگام بارگذاری صفحه یک تصویر متحرک Loading نمایش داده می شود تا صفحه به صورت کامل بارگذاری شود. دراین آموزش با استفاده از jQuery و CSS می خواهیم یک Loading ساده و کاربردی را برایتان آماده کنیم. با ما همراه باشید:

یک div ایجاد کرده و کلاس زیر را به آن اختصاص میدهیم.

<div class="loader"> 
</div>

سپس کلاس loader را به صورت زیر استایل می دهیم:

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('image/page-loader.gif') 50% 50% no-repeat rgb(249, 249, 249);
}

فایل page-loader.gif را از اینجا دانلود کنید و در مسیر ریشه پروژه خود داخل پوشه image ذخیره کنید. در غیر اینصورت تصویر نمایش داده نخواهد شد. حالا کافیست اسکریپت زیر را در تگ head سایت بنویسید:

<script> 
  $(window).load(function() {
    $('.loader').fadeOut('slow');
});
</script>

امیدوارم این آموزش مورد پسند شما دوستان واقع شده باشد.

جسبون مرجع برنامه نویسی و طراحی وب.