ورود با اکانت گوگل
یا
آقای متریال

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

لودینگ متریال برای وب

alisaffari


اطلاعات نویسنده
alisaffari

alisaffari

  • Exclusive Author
  • sold_between_10_000_and_50_000_dollars
  • bought_between_1_and_9_items
  • Iran (Islamic Republic of)
نمونه کارها
پشتیبانی
برای دیدن اطلاعات تماس تهیه کننده این محصول باید محصول رو خریداری کرده باشید

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

برای شروع باید کد های 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

دیدگاه هایی که برای این مطلب ارسال شده

  1. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: behnam فروردین ۲۵, ۱۳۹۵

    واقعا عالی

    • ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: علی صفاری فروردین ۲۶, ۱۳۹۵

      ممنون از نظر با ارزش

    • ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: علی صفاری فروردین ۲۶, ۱۳۹۵

      ممنون از نظر با ارزشتون

  2. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: مهدی رجبی اردیبهشت ۱, ۱۳۹۵

    خیلی ممنون

  3. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: رضا اردیبهشت ۱۳, ۱۳۹۵

    واقعا ممنونم… دست شما درد نکنه ، بسیار جالب بود

  4. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: مثبت بینان شریف خرداد ۲۳, ۱۳۹۵

    عجب سایتی داریییییییییییییییید
    مرسی

شما هم دیدگاهی برای این مطلب ارسال کنید

مطالب مرتبط

مطالب تصادفی

لوگوی دوستان

هایپر تمپ | HyperTemp