برای جستجو کلمه مورد نظر خود را وارد کنید

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

برای شروع باید کد های css رو درون فایل css قرار بدیم

کدهایcss

 

.loader {
    text-align: center;
}
.circular {        
 
  width:50px; 
  height:50px;
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;

}
@-webkit-keyframes rotate {
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}

@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}


.path {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite,
    color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite,
    color 6s ease-in-out infinite;
  stroke-linecap: round;
  stroke: #3f88f8;
}

@-webkit-keyframes dash {
  ۰%   {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  ۵۰%  { 
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  ۱۰۰% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}

@keyframes dash {
  ۰%   {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  ۵۰%  { 
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  ۱۰۰% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}

@-webkit-keyframes color {
  ۰%   {stroke: #3f88f8;}
  ۲۰%  {stroke: #3f88f8;}
  ۲۵%  {stroke: #dd413b;}
  ۴۵%  {stroke: #dd413b;}
  ۵۰%  {stroke: #f6ae2e;}
  ۷۰%  {stroke: #f6ae2e;}
  ۷۵%  {stroke: #259a5d;}
  ۹۵%  {stroke: #259a5d;}

}

@keyframes color {
  ۰%   {stroke: #3f88f8;}
  ۲۰%  {stroke: #3f88f8;}
  ۲۵%  {stroke: #dd413b;}
  ۴۵%  {stroke: #dd413b;}
  ۵۰%  {stroke: #f6ae2e;}
  ۷۰%  {stroke: #f6ae2e;}
  ۷۵%  {stroke: #259a5d;}
  ۹۵%  {stroke: #259a5d;}

}

 

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

See the Pen ZWywYm by علی صفاری (@alisaffari) on CodePen.21951

 

بعضی وقت ها نیاز هست که بعد از انجام کاری لودینگ به نمایش در بیاد

برای این کار باید کد html رو به صورت زیر تغیر بدیم تا در حالت عادی لودینگ ما غیر فعال باشه

 

<div style="display: none;" class="loader">
 <svg class="circular" height="50" width="50">
  <circle class="path" cx="25" cy="25.2" r="19.9" fill="none" stroke-width="6" stroke-miterlimit="10"></circle>
 </svg>
</div>

 

الان در حالت عادی باید بودینگ ما غیر فعال باشه

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

برای استفاده از کد های زیر حتما باید فرامورک جی کوئری در قالب شما اضافه شده باشه

اگه درقالب شما جی کوئری وجود نداره با استفاده از کد زیر جی کوئری رو اضافه کنید

نکته : بهتره که کد رو در هد قالب خودتون قرار بدید

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>

 

برای نمایش دادن از کد زیر استفاده میکنیم

$('.loader').show();

و برای پنهان کردن از کد زیر استفاده میکنیم

$('.loader').hide();

به همین سادگی 😉

 

سورس نمونه

See the Pen پروژه کار با لودینگ ۱ by علی صفاری (@alisaffari) on CodePen.21951