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

آموزش ها, آموزش های ویدئویی, طراحی قالب, کد های آماده

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

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

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

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

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

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

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

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

♠ جدیدترین محصولات قالب شرکتی رکس ( Rex ) قالب شرکتی رکس ( Rex )۱۵,۰۰۰ تومان قالب ۴۰۴ آسمونی قالب ۴۰۴ آسمونی۵,۰۰۰ تومان ♠ جدیدترین مطالب ایندکس نشدن سایت توسط موتور جستجوی گوگل! مشکل کاربران ایرانی ایندکس نشدن سایت توسط موتور جستجوی گوگل! مشکل کاربران ایرانیتنظیمات ثبت نام و ورود ووکامرس برای بهبود فروشگاه اینترنتی تنظیمات ثبت نام و ورود ووکامرس برای بهبود فروشگاه اینترنتیراست چین WP Bakery در حالت ردیف تمام عرض در وردپرس راست چین WP Bakery در حالت ردیف تمام عرض در وردپرسنصب بسته‌های نصبی بدون از دست رفتن اطلاعات قبلی سایت نصب بسته‌های نصبی بدون از دست رفتن اطلاعات قبلی سایتساخت فرم ورود و عضویت کاملا حرفه ای با طراحی متریال ساخت فرم ورود و عضویت کاملا حرفه ای با طراحی متریالولید بودن سایت در W3C Validator برای سئو چقدر مهم است؟ ولید بودن سایت در W3C Validator برای سئو چقدر مهم است؟محدود کردن نمایش کاراکتر های عنوان مطالب در طراحی قالب وردپرس محدود کردن نمایش کاراکتر های عنوان مطالب در طراحی قالب وردپرس اسکن وردپرس برای پیدا کردن فایل‌های مخرب و تروجان
این مطلب رو حتما بخون:
اسکن وردپرس برای پیدا کردن فایل‌های مخرب و تروجان
مشاهده مطلب

نکته: اگر شما در حال فکر کردن به این موضوع هستید که زبان‌های 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 */

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

 

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

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

افزونه یواست سئو
این مطلب رو حتما بخون:
افزونه یواست سئو نسخه رایگان به زبان فارسی برای بهبود سئو سایت
مشاهده مطلب
4.9/5 - (7 امتیاز)

مهدی ایبک ابادی

مهدی ایبک آبادی هستم ، موسس و بنیانگذار الماس وب، متخصص دنیای طراحی سایت و علاقه مند به وردپرس. 10 سال در حوزه برنامه نویسی و 6 سال به طور جدی در حوزه طراحی وبسایت فعالیت دارم.

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

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