آموزش ساخت لودینگ

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

سلام دوستان در این فیلم آموزشی شما یاد می گیرید تا با استفاده از html , css یک لودینگ طراحی کنید و با استفاده از کمی javascript کاری کنید که این لودینگ تا زمان بارگذاری کامل صفحه ادامه پیدا کنه.

لودینگ چیست؟ Loadnig

حتما شما هم به سایت هایی سر زدید و دیدید که یک انیمیشن تا زمان بارگذاری و لود شدن کامل صفحه برای شما اجرا میشه. به این حالت preloading می گویند و در اصطلاح ما به آن لودینگ سایت می گوییم.

یعنی از در زمان لود شدن سایت چه کار هایی انجام و چه چیز هایی نمایش داده شود.

در این ویدیو آموزش شما یاد می گیری که چگونه یک Loading طراحی کنید. علاوه بر آ فایل سورس پروژه در اختیار شما قرار خواهد گرفت.

دانلود فایل

دانلود سورس پروژه

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

لینک

برای ساخت لودینگ ابتدا می بایست در فایل پروژه خود یک بخش مربوط به آن ایجاد نمایید و به آن استایل دهی کنید.

html

<div id="preloader">
    <div class="animation">
        <div class="circle"></div>
    </div>
</div>

style

#preloader{
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
}
.animation{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}
.circle{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: lightgreen;
    z-index: 999;
    animation: circle 0.3s infinite;
}
@keyframes circle{
    100%{
        width: 110px;
    height: 110px;
    border-radius: 50%;
        opacity: 0;
    }
}

سپس خاصیت onload را به تگ body خود اضافه کنید و با استفاده از نوشتن نام یک تابع جاوااسکریپت تایین کنید که بعد از بارگذاری کامل صفحه چه اتفاقی بیفتد.

در این آموزش ما میخواهید که لودینگ حذف شود. بنرابراین مانند کد زیر میگوییم.

<body onload="loader()">
    <div id="preloader">
        <div class="animation">
            <div class="circle"></div>
        </div>
    </div>
   
    <script>
    function loader(){
       document.getElementById('preloader').style.display = 'none';
    }
    </script>
</body>

نتیجه نهایی

full project code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>loader - vipwebdl.ir</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            
        }
        body{
            background: #fc3;
            text-align: center;
        }
        #preloader{
            position: fixed;
            width: 100%;
            height: 100%;
            background: #fff;
        }
        .animation{
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50% , -50%);
        }
        .circle{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: lightgreen;
            z-index: 999;
            animation: circle 0.3s infinite;
        }
        @keyframes circle{
            100%{
                width: 110px;
            height: 110px;
            border-radius: 50%;
                opacity: 0;
            }
        }
    </style>
</head>
<body onload="loader()">
    <div id="preloader">
        <div class="animation">
            <div class="circle"></div>
        </div>
    </div>
  
    <script>
    function loader(){
       document.getElementById('preloader').style.display = 'none';
    }
    </script>
</body>
</html>

همچنین شما می توانید از یک فایل گیف برای انمیشن لودینگ سات خود استفاده کنید و دیگر مشقت ساختن انیمیشن با css را به دوش نکشید

تنها کافیست هنگام تایین background کلاس circle به جای تنظیم آن روی رنگ خاص روی یک گیف تنظیم کنید.

اینگونه شما میتوانید بسیار راحت تر و زیبا Loading سایت خود را بسازید.

شما همچنین می توانید با مراجعه به لینک زیر با زیباترین لودینگ ها برای سایت ها آشنا و در صورت لزوم از آن استفاده کنید

لودینگ ها

آموزش ساخت صفحه 404

آموزش ساخت گرادینت در css

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *