نمادها

شما اینجا هستید

آموزش تصویری ساخت آیکن بارگیری

آموزش تصویری ساخت آیکن بارگیری با Html و css

آموزش تصویری ساخت آیکن بارگیری به شما می آموزد که یک آیکن انیمیشنی برای لود سایت خود بسازید

سلام برنامه دراین آموزش تصویری تنها با کد و بدون عکس یا تصاویر gif اینکار را می کند

مشکل اصلی سایت ها با ارکان گرافیکی حجم آن است که ما در این آموزش راه حلی پیشنهاد می دهیم

بهترین راه استفاده از html و css است و فونت آیکن ها که تنها حجم آنها همان متن آنها است

استفاده از animation ها در css3 یکی از مواردی است که در این آموزش از آن بهره گرفته ایم

تنها با قراردادن چند خط کد کوتاه در Html و css می توانید این آیکن بار را بسازید

شما با استفاده از keyframe ها انیمشین خود را لحظه به لحظه در css می سازید

و در نهایت کلاسی برای آن انتخاب می کنید و آن کلاس را به html خود اختصاص می دهید

هرکجا که این کلاس را قرار دهید انیمیشن برای آن اجرا می شود

در آموزش تصویری ساخت آیکن بارگیری تمام این مراحل آموزش داده می شود

 

برای شروع ابتدا کد های زیر را به قسمت body اضافه کنید:

<body onload="myFunction()" style="margin:0;">

<div id="loader"></div>

<div style="display:none;" id="myDiv" class="animate-bottom">
  <h2>صفحه بارگیری شد!</h2>
  <p>نوشته ای برای نمایش بارگیری</p>
</div>

 

سپس برای استایل دهی و ظاهر سازی کد های زیر را به css خود اضافه کنید:

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  ۰% { -webkit-transform: rotate(0deg); }
  ۱۰۰% { -webkit-transform: rotate(360deg); }
}

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

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}

 

و در نهایت برای اجرای loader کد های جاوااسکریپت زیر را به انتهای کد های html خود آیکن بارگیری اضافه کنید:

<script>
var myVar;

function myFunction() {
    myVar = setTimeout(showPage, 3000);
}

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

 

آموزش ساخت آیکن بارگیری تمام است .

همچنین شما می توانید برای مشاهده جزئیات بیشتر آموزش تصویری را از باکس دانلود موجود در زیر همین پست دانلود نمایید

اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

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


این مجموعه فایل rar است که برای باز کردن آن نیاز به نرم افزار Winrar می باشد

دانلود آموزش تصویری ساخت آیکن بارگیری و سورس کد ها : نوع فایل:rar/video/code حجم فایل:28.00 مگابایت

بعد از اکسترکت (extract) کردن فایل ها آن را با یک پلیر تصویری ببینید

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.