انیمیشن لودینگ ساده تنها با استفاده از CSS

در این آموزش ساده با استفاده از سی اس اس به سادگی هرچه تمام تر، یک انیمیشن لودینگ (بارگزاری) ساده و بسیار زیبا را یاد در کنار هم می گیریم.

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

انیمیشن لودینگ

برای این کار ابتدا به یک div احتیاج داریم تا نقش لودینگ را در فایل html بازی کند:

<div id="loading"></div>

حال باید با استفاده از چند خط ساده سی اس اس شکل اولیه این المان را می سازیم:

#loading {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid black;
}

در این قطعه کد ابتدا با یکسان قرار دادن طول و عرض یک مربع ساخته و سپس با استفاده از border-radius آن را به یک دایره تبدیل می کنیم. در خط آخر نیز یک border سیاه رنگ را ساختیم.

حال نوبت به اضافه کردن بخش متفاوت به این دایره می رسد تا در هنگام چرخش قابل دیدن باشد. برای این کار فقط می توان رنگ یکی از حاشیه های ایجاد شده را از سیاه به رنگ دیگری تغییر داد. برای مثال در اینجا با border پایینی را به رنگی متفاوت تغییر می دهیم:

border-bottom-color: turquoise;

پیاده سازی انیمیشن در CSS

حال نوبت به اضافه کردن انیمیشن لودینگ در CSS می رسد. قبلا در مطلب «آموزش ساخت اسلایدر با استفاده از سی اس اس» با انیمیشن ها در CSS آشنا شدیم. برای این کار با استفاده از keyframes یک انیمیشن چرخش ساده با اسم rotation ایجاد میکنیم:

@keyframes rotation {
  ۰% {transform: rotate(0deg);}
  ۱۰۰% {transform: rotate(360deg);}
}

و در پایان نیز باید این انیمیشن را به دایره ساخته شده در بالا اضافه کنیم. برای این کار با نام بردن از نام انیمیشن لودینگ، مدت زمان مورد نظر، نوع انیمیشن و تعداد تکرار انیمیشن را اضافه می کنیم:

animation: rotation 1s linear infinite;

در پایان کد های سی اس اس انیمیشن لودینگ شما باید مانند کد های زیر باشد:

#loading {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid black;
  border-bottom-color: turquoise;
  animation: rotation 1s linear infinite;
}
@keyframes rotation {
  ۰% {transform: rotate(0deg);}
  ۱۰۰% {transform: rotate(360deg);}
}

همچنین شما می توانید با تغییر دادن استایل border پایین این دایره (مربع) شکل متفاوت تری بسازید. و یا می توانید علاوه بر حاشیه پایینی، حاشیه بالایی را نیز تغییر دهید تا باز هم استایلی متفاوت را برای انیمیشن لودینگ خود بسازید. برای مثال می توانید مانند کد زیر را پیاده سازی کنید تا دایره جذاب و ساده شما ساخته شود:

#loading {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid white;
  border-bottom-color: turquoise;
  border-bottom-style: dotted;
  border-top-color: turquoise;
  border-top-style: dotted;
  animation: rotation 1s linear infinite;
}

نظر شما درباره قابلیت های سی اس اس برای پیاده سازی یک انیمیشن لودینگ چیست؟