آموزش ایجاد Transitions و انیمیشن‌های صفحه بارگذاری (Loader) در CSS: طراحی لودرهای جذاب

دسته : آموزش رایگان CSS

آموزش ایجاد Transitions و انیمیشن‌های صفحه بارگذاری (Loader) در CSS: طراحی لودرهای جذاب

آموزش ایجاد Transitions و انیمیشن‌های صفحه بارگذاری (Loader) در CSS: طراحی لودرهای جذاب

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

 

مفهوم Loader و کاربرد آن در وب‌سایت‌ها

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

 

ایجاد Loader ساده با استفاده از CSS

برای شروع، می‌توانیم یک دایره چرخشی ساده ایجاد کنیم که یکی از رایج‌ترین طرح‌های Loader است.

مثال 1: Loader چرخشی ساده



< div class="loader" > < / div >

 



.loader {
  border: 8px solid #f3f3f3; /* رنگ خاکستری */
  border-top: 8px solid #3498db; /* رنگ آبی */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

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

 

در اینجا:

  • loader به صورت دایره‌ای با حاشیه تنظیم شده و انیمیشنی از چرخش 360 درجه دارد.

  • با border-radius: 50% دایره ساخته شده است و با animation به طور مداوم می‌چرخد.

 

ایجاد Loaderهای متحرک با استفاده از Keyframes

با استفاده از @keyframes می‌توانید انیمیشن‌های پیچیده‌تری برای Loader ایجاد کنید.

مثال 2: نقاط پرشی (Bouncing Dots)



< div class="dot-container" >
  < div class="dot" > < / div >
  < div class="dot" > < / div >
  < div class="dot" > < / div >
< / div >

 



.dot-container {
  display: flex;
  gap: 8px;
}

.dot {
  width: 15px;
  height: 15px;
  background-color: #3498db;
  border-radius: 50%;
  animation: bounce 0.6s infinite alternate;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

 

در اینجا:

  • dot-container دارای سه نقطه است که به صورت افقی مرتب شده‌اند.

  • انیمیشن bounce باعث می‌شود که هر نقطه به صورت عمودی حرکت کند و با animation-delay تأخیر زمانی برای هر نقطه تنظیم شده است.

 

استفاده از CSS Transition برای ایجاد Loaderهای نرم

با استفاده از transitions می‌توانید انیمیشن‌های نرم و زیبایی برای Loader ایجاد کنید.

مثال 3: دایره‌های در حال بزرگ شدن و کوچک شدن



< div class="pulse-loader" > < / div >

 



.pulse-loader {
  width: 20px;
  height: 20px;
  background-color: #3498db;
  border-radius: 50%;
  animation: pulse 1s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

 

در اینجا:

  • pulse-loader یک دایره است که به صورت نرم به حالت بزرگ‌تر و کوچک‌تر می‌رود و با opacity ترکیب شده است تا جلوه‌ای محو داشته باشد.

 

ترکیب چندین Loader برای ساخت یک انیمیشن پیچیده‌تر

با ترکیب چندین شکل مختلف می‌توانید Loaderهای پیچیده‌تری بسازید.

مثال 4: چرخش مربع‌ها



< div class="square-loader" >
  < div class="square" > < / div >
  < div class="square" > < / div >
  < div class="square" > < / div >
  < div class="square" > < / div >
< / div >

 



.square-loader {
  display: grid;
  grid-template-columns: repeat(2, 30px);
  grid-gap: 10px;
}

.square {
  width: 30px;
  height: 30px;
  background-color: #3498db;
  animation: square-spin 1s infinite linear;
}

.square:nth-child(1) { animation-delay: 0s; }
.square:nth-child(2) { animation-delay: 0.1s; }
.square:nth-child(3) { animation-delay: 0.2s; }
.square:nth-child(4) { animation-delay: 0.3s; }

@keyframes square-spin {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
  100% { transform: rotate(0deg); }
}

 

در اینجا:

  • چهار مربع با تاخیر زمانی مختلف در یک چرخش 90 درجه‌ای حرکت می‌کنند تا یک افکت چرخشی ایجاد کنند.

 

بهترین شیوه‌ها برای طراحی Loaderهای CSS

  • سادگی و سبک بودن: Loaderهای CSS باید ساده و سبک باشند تا باعث افزایش زمان بارگذاری نشوند.

  • انتخاب رنگ مناسب: از رنگ‌های متناسب با طرح کلی وب‌سایت استفاده کنید تا هماهنگی بین Loader و سایر بخش‌های سایت ایجاد شود.

  • سرعت انیمیشن: سرعت انیمیشن را متناسب با مدت زمان بارگذاری تنظیم کنید تا کاربر حس انتظار مناسبی داشته باشد.

  • توجه به وضوح: اطمینان حاصل کنید که Loader در هر اندازه و دستگاه به وضوح دیده شود.

  • استفاده از انیمیشن‌های نامحدود: انیمیشن‌ها را با گزینه infinite ایجاد کنید تا تا زمانی که بارگذاری کامل شود، ادامه پیدا کنند.

 

نتیجه‌گیری

با استفاده از CSS می‌توانید انواع مختلف Loaderهای زیبا و کاربردی را ایجاد کنید و به کاربران تجربه کاربری بهتری ارائه دهید. با استفاده از ویژگی‌های transitions و @keyframes می‌توانید انیمیشن‌های مختلفی را پیاده‌سازی کنید که علاوه بر جذابیت، بارگذاری سبک و سریعی نیز داشته باشند. طراحی صحیح Loader می‌تواند به کاربران درک بهتری از روند بارگذاری وب‌سایت بدهد و جذابیت بصری بیشتری به سایت شما اضافه کند.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

کار با تصاویر SVG در CSS: کنترل استایل و استفاده از گرافیک‌های مقیاس‌پذیر

کار با تصاویر SVG در CSS: کنترل استایل و استفاده از گرافیک‌های مقیاس‌پذیر

16م آبان 1403

مطالعه بیشتر

مدیریت خطاها و استفاده از try...catch در جاوا اسکریپت: راهنمای کامل و مثال‌ها

مدیریت خطاها و استفاده از try...catch در جاوا اسکریپت: راهنمای کامل و مثال‌ها

28م مهر 1403

مطالعه بیشتر

آموزش استفاده از box-shadow و text-shadow در CSS: ایجاد سایه‌های زیبا و جذاب

آموزش استفاده از box-shadow و text-shadow در CSS: ایجاد سایه‌های زیبا و جذاب

11م آبان 1403

مطالعه بیشتر

آموزش mix-blend-mode و background-blend-mode در CSS: ترکیب رنگ‌ها و ایجاد افکت‌های جذاب

آموزش mix-blend-mode و background-blend-mode در CSS: ترکیب رنگ‌ها و ایجاد افکت‌های جذاب

12م آبان 1403

مطالعه بیشتر

آموزش Pseudo-classes در CSS: تغییر استایل عناصر با hover، focus و nth-child

آموزش Pseudo-classes در CSS: تغییر استایل عناصر با hover، focus و nth-child

10م شهریور 1402

مطالعه بیشتر

الگوهای رایج برنامه‌نویسی ناهمگام در جاوا اسکریپت: Promise.race، Promise.all، و Promise.any کامل و مثال‌ها

الگوهای رایج برنامه‌نویسی ناهمگام در جاوا اسکریپت: Promise.race، Promise.all، و Promise.any کامل و مثال‌ها

1م آبان 1403

مطالعه بیشتر

مقدمه‌ای به template و دیتابایندینگ در Vue.js: نحوه مدیریت داده‌ها و رندرینگ پویا

مقدمه‌ای به template و دیتابایندینگ در Vue.js: نحوه مدیریت داده‌ها و رندرینگ پویا

28م شهریور 1402

مطالعه بیشتر

آموزش تغییر المان‌های DOM: ویرایش متن، سبک‌ها و کلاس‌ها در جاوا اسکریپت - راهنمای کامل با مثال‌ها

آموزش تغییر المان‌های DOM: ویرایش متن، سبک‌ها و کلاس‌ها در جاوا اسکریپت - راهنمای کامل با مثال‌ها

2م آبان 1403

مطالعه بیشتر

آموزش ایجاد، دسترسی و اصلاح آرایه‌ها در جاوا اسکریپت: راهنمای کامل

آموزش ایجاد، دسترسی و اصلاح آرایه‌ها در جاوا اسکریپت: راهنمای کامل

4م مهر 1403

مطالعه بیشتر

آموزش استفاده از cubic-bezier در CSS برای انیمیشن‌های سفارشی و حرفه‌ای

آموزش استفاده از cubic-bezier در CSS برای انیمیشن‌های سفارشی و حرفه‌ای

12م آبان 1403

مطالعه بیشتر

مدیریت ترتیب نمایش با z-index در CSS: آموزش کامل و کاربردی

مدیریت ترتیب نمایش با z-index در CSS: آموزش کامل و کاربردی

11م آبان 1403

مطالعه بیشتر

چگونه اسکریپت‌های ساده جاوا اسکریپت را در مرورگر بنویسیم و اجرا کنیم: راهنمای کامل برای مبتدیان

چگونه اسکریپت‌های ساده جاوا اسکریپت را در مرورگر بنویسیم و اجرا کنیم: راهنمای کامل برای مبتدیان

2م مهر 1402

مطالعه بیشتر

تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد