آموزش تصویری ساخت آیکن بارگیری با 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>
آموزش ساخت آیکن بارگیری تمام است .
همچنین شما می توانید برای مشاهده جزئیات بیشتر آموزش تصویری را از باکس دانلود موجود در زیر همین پست دانلود نمایید