آموزش رایگان CSS

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

16م آبان 1403 محراب حسن زاده
آموزش ایجاد 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 می‌تواند به کاربران درک بهتری از روند بارگذاری وب‌سایت بدهد و جذابیت بصری بیشتری به سایت شما اضافه کند.

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آموزش ساخت ماشین حساب با جاوا اسکریپت: راهنمای کامل با مثال‌های کاربردی
4م آبان 1403

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

مطالعه بیشتر
معرفی Vue.js و ویژگی‌های کلیدی آن: فریمورک مدرن برای توسعه وب تعاملی
28م شهریور 1402

معرفی Vue.js و ویژگی‌های کلیدی آن: فریمورک مدرن برای توسعه وب تعاملی

مطالعه بیشتر
آموزش استفاده از object-fit و object-position در CSS: تنظیم و قرارگیری تصاویر به‌صورت دقیق
12م آبان 1403

آموزش استفاده از object-fit و object-position در CSS: تنظیم و قرارگیری تصاویر به‌صورت دقیق

مطالعه بیشتر
مفاهیم پیشرفته در کلاس‌ها و وراثت (Super, Extends) در جاوا اسکریپت: راهنمای کامل و مثال‌ها
29م مهر 1403

مفاهیم پیشرفته در کلاس‌ها و وراثت (Super, Extends) در جاوا اسکریپت: راهنمای کامل و مثال‌ها

مطالعه بیشتر
آموزش جامع توابع بازگشتی (Recursion) و کاربردهای آن در جاوا اسکریپت: مثال‌ها و مفاهیم
29م مهر 1403

آموزش جامع توابع بازگشتی (Recursion) و کاربردهای آن در جاوا اسکریپت: مثال‌ها و مفاهیم

مطالعه بیشتر
آموزش کامل کنترل جریان و استفاده از if و else در جاوا اسکریپت: راهنمای جامع برای مبتدیان
2م بهمن 1402

آموزش کامل کنترل جریان و استفاده از if و else در جاوا اسکریپت: راهنمای جامع برای مبتدیان

مطالعه بیشتر
مفهوم برنامه‌نویسی هم‌زمان و ناهم‌زمان در جاوا اسکریپت: تفاوت‌ها، مثال‌ها و کاربردها
29م مهر 1403

مفهوم برنامه‌نویسی هم‌زمان و ناهم‌زمان در جاوا اسکریپت: تفاوت‌ها، مثال‌ها و کاربردها

مطالعه بیشتر
استفاده از overflow در CSS برای مدیریت محتوای اضافی: راهنمای کامل و کاربردی
11م آبان 1403

استفاده از overflow در CSS برای مدیریت محتوای اضافی: راهنمای کامل و کاربردی

مطالعه بیشتر
چگونه یک فوتر چسبان در CSS بسازیم: آموزش ساخت فوتر ثابت و همیشگی
2م شهریور 1403

چگونه یک فوتر چسبان در CSS بسازیم: آموزش ساخت فوتر ثابت و همیشگی

مطالعه بیشتر
آموزش لیست‌ها در CSS: طراحی و استایل‌دهی ساده برای لیست‌های HTML
10م شهریور 1402

آموزش لیست‌ها در CSS: طراحی و استایل‌دهی ساده برای لیست‌های HTML

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

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

مطالعه بیشتر
راهنمای کامل لیست‌ها در HTML: آموزش انواع و اصول سئو
20م مرداد 1402

راهنمای کامل لیست‌ها در HTML: آموزش انواع و اصول سئو

مطالعه بیشتر

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