ستروکیت

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

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

۱- اضافه کردن HTML

<div id="loader" class="loader">
  <div class="loader-icon"></div>
</div>

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

div دوم برای نشان دادن آیکون است.

۲- اضافه کردن CSS

.loader {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: #00d7d7;
 z-index: 1001;
}

.loader-icon {
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -20px;
 margin-left: -20px;
 border: 6px solid #f3f3f3;
 border-top: 6px solid #3498db;
 border-radius: 50%;
 width: 40px;
 height: 40px;
 animation: spin 2s linear infinite;
}

@keyframes spin {
 0% {
  transform: rotate(0deg);
 }

 100% {
  transform: rotate(360deg);
 }
}

3- اضافه کردن JAVA SCRIPT

حالا نوبت آن می‌رسد که وقتی وب سایت به طور کامل بارگذاری شد صفحه انتظار کنار برود و سایت نمایش داده شود.

<script>
 window.onload = function showPage() {
   document.getElementById("loader").style.display = "none";
 }
 </script>