لودرهای تک عنصری: میله ها

ما به اسپینرها نگاه کرده ایم. ما به نقطه ها نگاه کرده ایم. اکنون می‌خواهیم به یک الگوی رایج دیگر برای لودرها بپردازیم: بار . و ما در این سومین مقاله از این سری، همان کاری را انجام خواهیم داد که سایرین را با ساختن آن تنها با یک عنصر و با CSS انعطاف پذیر که ایجاد تغییرات را آسان می کند، انجام دهیم.

بیایید با نه یک، نه دو، بلکه با 20 نمونه بارگذار شروع کنیم.

چی؟! آیا قصد دارید هر یک از آنها را به تفصیل بیان کنید؟ این برای یک مقاله خیلی زیاد است!

شاید در نگاه اول اینطور به نظر برسد! اما همه آنها به یک ساختار کد تکیه می کنند و ما فقط چند مقدار را برای ایجاد تغییرات به روز می کنیم. این تمام قدرت CSS است. ما یاد نمی‌گیریم که چگونه یک لودر ایجاد کنیم، اما تکنیک‌های مختلفی را یاد می‌گیریم که به ما اجازه می‌دهد تا با استفاده از همان ساختار کد، هر چقدر که می‌خواهیم ایجاد کنیم.

بیایید چند میله بسازیم!

ما با تعریف ابعاد برای آنها شروع می کنیم width (و یا height) با aspect-ratio برای حفظ تناسب:

.bars { width: 45px; aspect-ratio: 1;
}

ما سه نوار "جعلی" با یک گرادیان خطی در پس‌زمینه داریم - بسیار شبیه به نحوه ایجاد بارگذارهای نقطه‌ای در قسمت 2 این سری.

.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

کد بالا نتیجه زیر را به ما می دهد:

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

متحرک سازی میله ها

ما یا اندازه یا موقعیت عنصر را متحرک می کنیم تا بارگذار نوار را ایجاد کنیم. بیایید با تعریف فریم های کلیدی انیمیشن زیر، اندازه را متحرک کنیم:

@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}

ببینید آنجا چه خبر است؟ بین 0% و 100%، انیمیشن تغییر می کند background-size از گرادیان پس زمینه عنصر. هر فریم کلیدی سه اندازه پس‌زمینه (یکی برای هر گرادیان) تنظیم می‌کند.

و در اینجا چیزی است که ما دریافت می کنیم:

آیا می توانید تمام تغییرات احتمالی را که می توانیم با بازی با پیکربندی های مختلف انیمیشن برای اندازه ها یا موقعیت ها بدست آوریم، تصور کنید؟

بیایید اندازه را ثابت کنیم 20% 50% و این بار موقعیت ها را به روز کنید:

.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

... که یک لودر دیگر به ما می دهد!

احتمالاً تا به حال این ترفند را به دست آورده اید. تنها چیزی که نیاز دارید این است که یک جدول زمانی تعریف کنید که آن را به یک فریم کلیدی ترجمه کنید. با متحرک کردن اندازه، موقعیت - یا هر دو! - تعداد بی نهایتی از امکانات لودر در نوک انگشتان ما وجود دارد.

و هنگامی که با چنین تکنیکی راحت شدیم، می‌توانیم جلوتر برویم و از یک گرادیان پیچیده‌تر برای ایجاد یکنواخت استفاده کنیم بیش لودرها

انتظار می رود برای دو نمونه آخر در آن نسخه ی نمایشی، همه بارگذارهای نوار از نشانه گذاری و سبک های زیرین یکسان و ترکیب های متفاوتی از انیمیشن ها استفاده می کنند. کد را باز کنید و سعی کنید هر فریم را به طور مستقل تجسم کنید. خواهید دید که ساختن ده ها نسبتاً بی اهمیت است - اگر نه صدها - از تغییرات

فانتزی شدن

آیا ترفند ماسکی را که با بارگذارهای نقطه انجام دادیم، به خاطر دارید؟ مقاله دوم از این مجموعه? ما می توانیم همین کار را اینجا انجام دهیم!

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

بیایید یک نسخه نمایشی بگیریم و آن را به روز کنیم:

تنها کاری که من انجام دادم به روز رسانی همه موارد بود background-* با mask-* و من یک رنگ بندی گرادیان اضافه کردم. به همین سادگی و در عین حال ما یک لودر جالب دیگر دریافت می کنیم.

پس فرقی بین نقطه ها و میله ها نیست؟

فرقی ندارد! من دو مقاله مختلف نوشتم تا نمونه های بیشتری را پوشش دهم، اما در هر دو، من بر تکنیک های یکسانی تکیه می کنم:

1. گرادیان برای ایجاد اشکال (نقاط یا میله یا شاید چیز دیگری)
2. انیمیشن background-size و / یا background-position برای ایجاد انیمیشن لودر
3. اضافه کردن ماسک برای اضافه کردن لمس رنگ

گرد کردن میله ها

بیایید این بار چیز متفاوتی را امتحان کنیم تا بتوانیم لبه های میله های خود را گرد کنیم.

استفاده از یک عنصر و آن ::before و ::after شبه، ما سه نوار یکسان تعریف می کنیم:

.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

این به ما سه میله می دهد، این بار بدون تکیه بر یک گرادیان خطی:

اکنون ترفند این است که آن میله ها را با یک گرادیان دوست داشتنی پر کنید. برای شبیه سازی یک گرادیان پیوسته، باید با آن بازی کنیم background خواص در شکل بالا، ناحیه سبز، مساحت تحت پوشش لودر را مشخص می کند. آن ناحیه باید به اندازه گرادیان باشد و اگر محاسبه کنیم، برابر است با ضرب هر دو طرف برچسب گذاری شده S در نمودار، یا background-size: var(--s) var(--s).

از آنجایی که عناصر ما به صورت جداگانه قرار می گیرند، باید موقعیت گرادیان را در داخل هر یک به روز کنیم تا مطمئن شویم همه آنها با هم همپوشانی دارند. به این ترتیب، ما یک گرادیان پیوسته را شبیه سازی می کنیم، حتی اگر واقعاً سه تا از آنها باشد.

برای عنصر اصلی (قرار گرفته در مرکز)، پس زمینه باید در مرکز باشد. ما از موارد زیر استفاده می کنیم:

.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}

برای شبه عنصر سمت چپ، به پس زمینه سمت چپ نیاز داریم

.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}

و برای شبه سمت راست، پس زمینه باید در سمت راست قرار گیرد:

.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}

با استفاده از همان متغیر CSS، --_i، که برای ترجمه استفاده کردیم، می توانیم کد را به این صورت بنویسیم:

.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

حالا تنها کاری که باید انجام دهیم این است که ارتفاع را متحرک سازیم و مقداری تاخیر اضافه کنیم! در اینجا سه ​​مثال وجود دارد که در آنها همه چیز متفاوت است، رنگ‌ها و اندازه‌ها:

پسگفتار

امیدوارم تا کنون از تمام قدرت‌هایی که برای ساختن انیمیشن‌های بارگذاری پیچیده دارید، بسیار تشویق شده باشید. تنها چیزی که ما نیاز داریم یک عنصر است، یا شیب یا شبه برای ترسیم میله ها، سپس چند فریم کلیدی برای جابجایی اشیا. این کل دستور العمل برای بدست آوردن تعداد بی پایانی از امکانات است، بنابراین بیرون بروید و شروع به پختن چیزهای مرتب کنید!

تا مطلب بعدی یک مجموعه خنده دار از لودرها را که در آن در حال ترکیب هستم برای شما می گذارم نقطه ها و میله ها!

---

لودرهای تک عنصری: میله ها در ابتدا منتشر شد ترفندهای CSS. تو باید دریافت خبرنامه.

• Coinsmart. بهترین صرافی بیت کوین و کریپتو اروپا.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی رایگان.
• CryptoHawk. رادار آلت کوین امتحان رایگان.
• منبع: https://css-tricks.com/single-element-loaders-the-bars/