نمایش لودینگ قبل از بارگذاری کامل صفحه

در برخی از وب سایت هایی که اطلاعات زیادی ارسال می‌شود کاربرها مدت زمان اندکی مجبور می‌مانند تا صفحه مورد نظر به طور کامل بارگذاری شود.این زمان اندک ممکن است کاربران را کمی سردرگم یا نماید و ممکن است برای برخی از کاربران اصلا قابل تحمل نباشد. برای این که تا حدودی کاربر را قانع کنیم تا زمان لود شدن کامل وب سایت منتظر بماند قبل از لود شدن سایت می توانیم یک شکل متحرک برای کاربر نمایش دهیم تا کاربر را سرگرم نمایند و موقع لود کامل کامل وب سایت این شکل را حذف کنیم.
ما این کار را با html,css,javascript و بدون تصویر گیف انجام می دهیم.

مجموعه کدهای زیر را می‌توانید در یک فایل اچ تی ام ال در انتهای این مطلب دانلود نمائید.
لطفا نظرات و مشکلات خود را از طریق نظرات و دیدگاه ها با ما در میان بگذارید.

برای پیاده سازی لودینگ نمایش داده شده در انهای این مطلب ابتدا تکه کد زیر را بلافاصله بعد از تگ body قرار دهید

<div class="preloader-container">
    <div class="preloader">
      <div class="bar bar1"></div>
      <div class="bar bar2"></div>
      <div class="bar bar3"></div>
      <div class="bar bar4"></div>
      <div class="bar bar5"></div>
      <div class="bar bar6"></div>
      <div class="bar bar7"></div>
      <div class="bar bar8"></div>
      <div class="bar bar9"></div>
      <div class="bar bar10"></div>
      <div class="bar bar11"></div>
      <div class="bar bar12"></div>
      <div class="bar bar13"></div>
      <div class="bar bar14"></div>
      <div class="bar bar15"></div>
      <div class="bar bar16"></div>
      <h1>loading the data</h2>
      </div>
  </div>

سپس کد زیر را در فایل سی اس اس قرار دهید:

.preloader-container {
  position: absolute;
  background-color: white;
  width: 100%;
  height: 100%;
  z-index: 1100;
}
.preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bar {
  width: 12px;
  height: 120px;
  border-radius: 10px 10px;
  background-color: #2F9BF1;
  display: inline-block;
  transform-origin: bottom center;
  animation: loading 1.5s ease-in-out infinite;
  /* -webkit-ransfors-origin: bottom center;
  -webkit-animation: loading 1.5s ease-in-out iofinate: */
}
.bar1 {
  animation-delay: 0.1s ;
}
.bar2 {
animation-delay: 0.2s;
}
.bar3 {
animation-delay: 0.3s;
}
.bar4 {
  animation-delay: 0.4s;
  }
.bar5 {
animation-delay: 0.5s;
}
.bar6 {
  animation-delay: 0.6s;
}
.bar7 {
  animation-delay: 0.7s;

}
.bar8 {
   animation-delay: 0.8s;
 }
.bar9 {
   animation-delay: 0.9s;
 }
.bar10 {
animation-delay: 1s;
}
.bar11 {
animation-delay: 1.1s;
}
.bar12 {
animation-delay: 1.2s;
}
.bar13 {
animation-delay: 1.3s;
}
.bar14 {
animation-delay: 1.4s;
}
.bar15 {
animation-delay: 1.5s;
}
.bar16 {
animation-delay: 1.6s;
}
@keyframes loading {
  ۰%  {height: 20px;}
 /* ۲۵%  {height: 25px;} */
 ۵۰%  {height: 120px;}
 /* ۷۵%  {height: 75px;} */
 ۱۰۰% {height: 60px;}
}

و تکه کد زیر را در انتهای فایل جاواسکریپت یا در فایل اچ تی ام ال و در انتهای همه‌ی کدها قرار دهید:

window.addEventListener("load",function() {
  var loadScreen=document.querySelector(".preloader-container");
  document.body.removeChild(loadScreen);
})

دیدگاه خود را بنویسید