آموزش های کوچک » نتایج بزرگ همراه با آموزش فارسی

کد لودینگ سایت loader site

loader

آموزش ساخت کد لودینگ سایت 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 ، آموزش طراحی سایت ، ربات تلگرام ، آموزش زبان اسپانیایی ، آموزش سئو حرفه ای رتبه اول گوگل و … است .

 

با آموزش های بعدی ما همراه باشید …

آموزش فارسی

تیم آموزش فارسی تمامی تلاش خود را در راستای رضایت و بالابردن علم و دانش شما عزیزان به کار می برد تا ذره کوچک برای جبران اعتماد و قدردانی شما کاربران گرامی باشد پس در این راه با اشتراک گذاری مطالب این سایت در شبکه های اجتماعی خودتان همچنین با ارسال نظرات و انتقادات خود ما را یاری رسانید...

نوشته‌های مرتبط

قوانین ارسال دیدگاه

  • چنانچه دیدگاهی توهین آمیز باشد و متوجه اشخاص مدیر، نویسندگان و سایر کاربران باشد تایید نخواهد شد.
  • چنانچه دیدگاه شما جنبه ی تبلیغاتی داشته باشد تایید نخواهد شد.
  • چنانچه از لینک سایر وبسایت ها و یا وبسایت خود در دیدگاه استفاده کرده باشید تایید نخواهد شد.
  • چنانچه در دیدگاه خود از شماره تماس، ایمیل و آیدی تلگرام استفاده کرده باشید تایید نخواهد شد.
  • چنانچه دیدگاهی بی ارتباط با موضوع آموزش مطرح شود تایید نخواهد شد.
دیدگاه‌ها

*
*

    یحیی پاسخ

    سلام برای ساخت صفحه جدید مثلا درباره ما وغیره باید فایل جدید به چه نامی ایجاد کنم مرسی بابت اموزش های کاربردی که میزارین
    لطفا زود جواب بدین تشکر"☺!

      میثم شادکام پاسخ

      سلام و احترام :
      می توانید تیکت بزنید بررسی شود ...

تخفیف 30%
کد تخفیف 75%
کد تخفیف 100%
تخفیف 50%
دانلود مقاله اشتباهات هزینه دار سئو SEO
کد تخفیف 13%
کد تخفیف 20%
کد تخفیف 90%
شانس خود را برای دریافت جایزه دریافت کنید!
آدرس ایمیل و تلفن همراه خود را وارد کنید و چرخ را چرخانید. این شانس شما برای به دست آوردن تخفیف های شگفت انگیز است!