ساخت لودینگ ساده و زیبا (HTML و CSS) با کاپیتان کد

سلام.

امروز می خوایم توی اولین مطلب با هم یک لودینگ پیچ جالب مثل این?، برای سایتمون طراحی کنیم. می تونید این رو برای وقتی که سایتتون هنوز کامل لود نشده بگذارید.

بزن بریم ...

اول از همه من دو تا فایل می سازم به نام های loading.html و style.css.
قراره توی فایل css، استایل ها مربوط به لودینگ رو قرار بدیم. ( خودتون می دونید چه شکلی باید تنظیم کنید )
حالا میایم ساختار و به اصطلاح خود Loading رو می نویسیم:

<div class=&quotloading&quot>
<div class=&quotloading-item&quot></div>
<div class=&quotloading-item&quot></div>
<div class=&quotloading-item&quot></div>
<div class=&quotloading-item&quot></div>
</div>

یک بدنه ساختیم و درونش توپ ها رو قرار دادیم.

خوب کد HTML ما تمام شد! حالا باید بریم و استایل ها رو بنویسیم.

استایل ها

اول از همه با بدنه ی Loading رو وسط صفحه قرار بدیم.

.loading {
position: absolute;
top: 50%;
left: 50%;
display: flex;
justify-content: center;
align-items: center;
transform: translate(-50%, -50%);
}

حالا مییایم به همه ی توپ ها استایل می دیم تا حداقل شبیه دایره باشن ?.

نکته: loading-item استایل هایی هست که برای همه ی توپ ها یکسان هست.

.loading .loading-item {
width: 20px;
height: 20px;
border-radius: 50%;
margin: 2px;
background-color: red;
}

تا الان:

حالا وقت ایجاد انیمیشنه. سخت نیست، نگران نباشید!
ابتدا انیمیشن رو تعریف می کنیم:

@keyframes loading-item {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-100px);
}
100% {
transform: translateY(0);
}
}

این انیمیشن کاری می کنه که اول المنت هیچی به بالا نرفته باشه. بعد -100 تا میره. بعد در آخر دوباره بر می گرده سر جاش.
حالا به کد یکسان همه ی توپ ها این ها رو اضافه می کنیم:

animation-name: loading-item;
animation-duration: 1.5s;
animation-iteration-count: infinite; 

نام انیمیشن، مدت زمان اجرای انیمیشن و تعداد اجرا انیمیشن رو تنظیم کردیم ...

اگه الان به خروجی نگاه کنید متوجه دو چیز می شید: رنگ توپ ها و این که همه ی توپ ها همزمان بالا و پایین میرن.

با این کد ها می توانیم به راحتی این مشکل رو حل کنیم.

.loading .loading-item:nth-child(1) {
background-color: rgb(252, 47, 47);
animation-delay: 0ms;
}

.loading .loading-item:nth-child(2) {
background-color: rgb(47, 71, 252);
animation-delay: 100ms;
}

.loading .loading-item:nth-child(3) {
background-color: rgb(15, 182, 79);
animation-delay: 200ms;
}

.loading .loading-item:nth-child(4) {
background-color: rgb(245, 245, 14);
animation-delay: 300ms;
}

با نگاه کردن به این ها متوجه می شید که اومدیم با استفاده از nth-child هر کدوم از توپ ها رو انتخاب کردیم و به هر کدوم یک پس زمینه و تاخیر برای شروع انیمیشن می دیم.

کار Loading ما تموم شد. می توانید بعضی از چیز هاش رو تغییر بدید:

امیدوارم خوشتون بیاد. تا مطلب دیگر بدرود ...

..._.__ کاپیتان کد __._...