آموزش فارسی » آموزش های کوچک نتایج بزرگ | آموزش سئو seo – آموزشی برنامه نویسی – دانلود رایگان کنترل پروژه msp – ربات اینستاگرام و روش اصلی افزایش فالوور اینستاگرام – آموزش برنامه نویسی ربات تلگرام
آموزش ساخت کد لودینگ سایت loader site
با سلام خدمت کاربران سایت آموزش فارسی
این بار با یکی دیگر از اموزش های جامع و پر کاربرد در خدمت شما هستیم که می تواند به دانش و کار شما کمک زیادی شود پس با ما همراه باشید …
بهتون پیشنهاد میکنم این فیلم آموزشی را تا اخر ببنید که تمامی قسمت های این کد لودینگ سایت را به شما آموزش دادیم و بررسی کردیم .
خوب این کد برای لود شدن اول سایت یا بارگذاری سایت شما در مرورگر های مختلف برای کاربران سطح جهان است که موقعی این کد اجرا خواهد شد که سایت شما برای اولین بار برای کاربرد در مرورگر در حال لود شدن است یا از صحفه سایت شما به صحفه دیگری می رود یک موشن یا حالتی از خود نمایش می دهد که شاید برای کاربر قشنگ و جذاب باشد …
اگر مقداری سایت شما طول کشید که البته هرچه زمان لود شدن سایت شما کمتر باشد خیلی به نفع شماست و امتیاز مثبت از گوگل دریافت می کنید چرا که هر چه لودینگ سایت شما بالاتر برود و کاربر بیشتر در انتظار باشد ممکن است سایت شما را ترک بکند یا منجر به خرید نشود پس به همین دلیل باید لودینگ سایت شما بالا باشد ولی با این اوصاف این کد را برای شما قرار دادیم که جذابیت و موشنی که دارد کاربر را سمت خود بکشد و آن انتظار کوتاه را هم متوجه نشود .
از این طریق کاربر را در سایت خود نگه می دارید و نمیگذارید سایت را ترک کند و هم یک جذابیت خاصی به سایت خود داده اید …
طریقه عملکرد کد لودینگ سایت :
خوب بریم سراغ آموزش خودمان قدم اول چیست ؟
قدم اول باید درون فایل index خود یک div با کلاس loader یا هر اسمی که خودتان خواستید درست کنید به این طریق :
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>آموزش فارسی</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="loader"></div>
</body>
</html>
قبل از هر چیز فایل css که درست کردید را به فایل index خود لینک کنید که خیلی مهم است اگر فراموش کنید حتما کد شما عمل نخواهد کرد .
خوب بعد از نوشتن کد اچ تی ام ال نوبت به نوشتن کد سی اس اس می رسد
خوب حالا چونه باید کد css را نوشت به این طریق :
body {
width: 100%;
height: 100vh;
margin: 0;
}
.loader {
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-color: #03a9f4;
border-radius: 50%;
}
.loader:after {
content: '';
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
border: 0px solid white;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: loading 1000ms ease-out forwards infinite;
animation: loading 1000ms ease-out forwards infinite;
}
@-webkit-keyframes loading {
۰% {
border: 0px solid white;
}
۲۰% {
border: 8px solid white;
width: 0%;
height: 0%;
}
۱۰۰% {
border: 8px solid white;
width: 100%;
height: 100%;
}
}
@keyframes loading {
۰% {
border: 0px solid white;
}
۲۰% {
border: 8px solid white;
width: 0%;
height: 0%;
}
۱۰۰% {
border: 8px solid white;
width: 100%;
height: 100%;
}
}
خوب دیگر نیازی به نوشتن هیچ کد دیگری نیست اگر خوروجی بگیرید می بینید که درست کار می کند و مشکلی هم ندارد البته برای این که روی سایت خودتان عملکرد خوبی داشته باشد شاید کمی تغییرات درون کد خواهی خود داشته باشید ولی به هر حال میتوانید نسبت به ایده خود کم و زیاد کنید و آن چیزی را بسازید که خودتان دوست دارید .
وب سایت آموزش فارسی عرضه کننده فروش فایل های کنترل پروژه msp ، آموزش طراحی سایت ، ربات تلگرام ، آموزش زبان اسپانیایی ، آموزش سئو حرفه ای رتبه اول گوگل و … است .
با آموزش های بعدی ما همراه باشید …
دمتون گرم
خواهش می کنم
سلام برای ساخت صفحه جدید مثلا درباره ما وغیره باید فایل جدید به چه نامی ایجاد کنم مرسی بابت اموزش های کاربردی که میزارین
لطفا زود جواب بدین تشکر”☺!
سلام و احترام :
می توانید تیکت بزنید بررسی شود …