گاهی اوقات به دلیل کندی سرعت اینترنت وبسایت شما دیرتر نمایش داده می شود، به همین دلیل بهتر است که یک لودر زیبا قبل از نمایش سایت خودتون طراحی کنید تا کاربر سایتتون را خاص ببینه و سریع مرورگر را نبندد و قطعا روی رتبه سئو و رنکینگ وبسایت شما تاثیر بسزایی خواهد گذاشت.

بنابراین بهتره شروع به کدنویسی کنیم:

ابتدا فایلهای html را براتون نمایش می دهیم:

 

    
         <h2>خروجی نمایش لودر وبسایت  </h2>
        
 <div class="s1">
      <div class="s b sb1"></div>
      <div class="s b sb2"></div>
      <div class="s b sb3"></div>
      <div class="s b sb4"></div>
    </div>


    <div class="s2">
      <div class="s b sb5"></div>
      <div class="s b sb6"></div>
      <div class="s b sb7"></div>
      <div class="s b sb8"></div>
    </div>

    <div class="bigcon">
      <div class="big b"></div>
    </div>
       
  </div>
    

حال نمایش استایل های کدهای لودر وبسایت را در فایل با پسوند .css قرار می دهیم:

 

    
       * {
  box-sizing: border-box;
}

body {
  padding: 0px; background-color: #002031;
}
.s2 {
  position: absolute; height: 100px;  width: 100px;
  background-color: transparent; top: 50vh;  left: 50%;
  transform: translate(-50%, -50%);
}
.s1 {
  position: absolute; height: 100px;  width: 100px;
  top: 50vh;  left: 50%; transform-origin: center;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: transparent;
}
.bigcon {
  position: absolute;height: 95px;
  width: 95px;  top: 50vh;
  left: 50%;  transform-origin: center;
  transform: translate(-50%, -50%) rotate(-45deg);
  background-color: transparent;
  animation: bigcon 2s infinite linear;
  animation-delay: 0.25s;
}
.b {
  border-radius: 50%;  position: absolute;
}
.s {
  width: 25px;  height: 25px;
  animation: small 2s infinite ease;
  box-shadow: 0px 2px rgba(0,0,0,0.3);
   background-color: #46b9ff;
}
.s:nth-child(1) {
  top: 0%;  left: 0%;
}
.s:nth-child(2) {
  top: 0%;  right: 0%;
}
.s:nth-child(3) {
  right: 0%;  bottom: 0%;
}
.s:nth-child(4) {
  bottom: 0%;  left: 0%;
}
.big {
  width: 20px;  height: 20px;
  border-radius: 15px;
  box-shadow:0px 0px 10px #54f7f8, 0px 0px 20px #54f7f8, 
  0px 0px 30px #54f7f8, 0px 0px 50px #54f7f8, 0px 0px 60px #54f7f8 ;
  z-index: 1;  background-color: #54f7f8;
  animation: bigball 1s infinite linear;
}
.sb1{  animation-delay: -1.75s;}
.sb6{  animation-delay: -1.5s;}
.sb2{  animation-delay: -1.25s;}
.sb7{  animation-delay: -1s;}
.sb3{  animation-delay: -0.75s;}
.sb8{  animation-delay: -0.5s;}
.sb4{  animation-delay: -0.25s;}
.sb5{  animation-delay: -0s;}
@keyframes bigcon {
  0% {
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  100% {
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(405deg);
  }
}

@keyframes small {
  0%  {    transform: scale(1);background-color: #46b9ff; }
  10% {    transform: scale(1.3);    background-color: #54f7f8;  }
  15% {    transform: scale(1);  }
  25% {    transform: scale(1);     background-color: #46b9ff;  }
  100% {   transform: scale(1);     background-color: #46b9ff;  }
}

    

خروجی طراحی لودر وبسایت با html5 و css3 :