۲ طراحی و ایجاد صفحه لودینگ برای سایت با استفاده از HTML , CSS

صفحه لودینگ زمانی باید استفاده شود که می خواهید قبل از اینکه سایت شما به صورت کامل لود شود صفحه لودینگ به کاربر نمایش داده شود.در این حالت دیگر زمان لود سایت شما به کاربر نمایش داده نمی شود و کاربر سایت شما فقط صفحه لودینگ سایت را می بیند.

صفحه لودینگ چیست ؟

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

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

ساخت و ایجاد لودینگ و صفحه لودینگ

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

خب ما در این آموزش نحوه ساخت لودینگ برای سایت را قدم به قدم به شما به صورت متن و آموزش ویدیویی آموزش خواهیم داد. در این مقاله از سایت الماس وب قصد داریم برای بار دوم آموزش طراحی لودینگ برای سایت ها و همچنین سایت های وردپرسی را با استفاده از HTML و CSS کدنویسی کنیم.

نکته: اگر شما در حال فکر کردن به این موضوع هستید که زبان‌های html و css را بلد نیستید، اصلاً نگران نباشید زیرا ما در بخش آکادمی سایت الماس وب این دو زبان پایه برنامه‌نویسی سایت را از صفر تا صد و به صورت جامع و ویدئویی آموزش داده ایم. شما می‌توانید در دوره آموزش html و css به صورت رایگان ثبت نام کرده و یادگیری زبان‌های HTML و CSS را از پایه شروع نمایید.
شروع یادگیری رایگان HTML و CSS

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

نکته: لازم به ذکر است ما در الماس وب قبلاً نیز مقاله آموزشی در رابطه با ساخت و ایجاد لودینگ منتشر کرده‌ایم در صورتی که نیاز دارید این مقاله را مطالعه و از آموزش ساخت لودینگ برای سایت نهایت استفاده را ببرید به لینک کدهای آماده ی طراحی وب سایت مراجعه فرمایید.

کدنویسی ساخت و ایجاد لودینگ برای سایت

قسمت اول :

ابتدا باید برای کدنوسی لودینگ ساختار اصلی آن که توسط زبان HTML ایجاد میشود را کدنویسی و پیاده سازی کنیم.

<div class="loader-container">
    <div class="loader load-1"></div>
    <div class="loader load-2"></div>
    <div class="loader load-3"></div>
</div>

قسمت دوم:

سپس برای اینکه به لودینگ خودمان رنگ و لعاب بدیم بایستی که از کدهای css استفاده کنیم. همانطور که در زیر می بینید ما استایل های اولیه لودینگ را ایجاد و کدنویسی کردیم سپس با استفاده از انیمیشن های CSS صفحه لودینگ خود را متحرک کردیم.

/* WWW.ALMASWEB.ORG */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
}

.loader-container {
  position: relative;
  height: 200px;
  width: 200px;
}

.loader {
  border: 5px solid transparent;
  border-radius: 50%;
  animation: rotate 4s ease-in-out infinite;
  position: absolute;
}

.load-1 {
  border-top-color: red;
  height: 200px;
  width: 200px;
  top: 0;
  left: 0;
}

.load-2 {
  border-top-color: blue;
  height: 250px;
  width: 250px;
  top: -25px;
  left: -25px;
  animation-duration: 2s;
}

.load-3 {
  border-top-color: orange;
  height: 300px;
  width: 300px;
  top: -50px;
  left: -50px;
  animation-duration: 1s;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
/* WWW.ALMASWEB.ORG */

آموزش ویدئویی طراحی و ساخت لودینگ برای سایت

 
طراحی این لودینگ به پایان رسید آموزش ویدئویی این مقاله در اینستاگرام من نیز منتشر شده اگر به این چنین آموزش ها علاقه مند هستید لطفا پیج اینستاگرام من رو فالو کنید.😁

ورود به پیج اینستاگرام من