سنگل عنصر لوڈرز: بارز

ہم نے اسپنرز کو دیکھا ہے۔ ہم نے نقطوں کو دیکھا ہے۔ اب ہم لوڈرز کے لیے ایک اور عام پیٹرن سے نمٹنے جا رہے ہیں: سلاکھون. اور ہم سیریز کے اس تیسرے مضمون میں وہی کام کرنے جا رہے ہیں جیسا کہ ہمارے پاس صرف ایک عنصر کے ساتھ اور لچکدار CSS کے ساتھ بنا کر ہے جو مختلف حالتوں کو تخلیق کرنا آسان بناتا ہے۔

آئیے ایک نہیں، دو نہیں بلکہ بار لوڈرز کی 20 مثالوں سے شروعات کریں۔

کیا؟! کیا آپ ان میں سے ہر ایک کی تفصیل بتانے جا رہے ہیں؟ یہ ایک مضمون کے لئے بہت زیادہ ہے!

یہ پہلی نظر میں ایسا لگتا ہے! لیکن یہ سب ایک ہی کوڈ ڈھانچے پر انحصار کرتے ہیں اور ہم تغیرات پیدا کرنے کے لیے صرف چند اقدار کو اپ ڈیٹ کرتے ہیں۔ یہ سی ایس ایس کی تمام طاقت ہے۔ ہم ایک لوڈر بنانے کا طریقہ نہیں سیکھتے، لیکن ہم مختلف تکنیکیں سیکھتے ہیں جو ہمیں صرف ایک ہی کوڈ ڈھانچہ کا استعمال کرتے ہوئے اتنا لوڈر بنانے کی اجازت دیتے ہیں۔

آئیے کچھ سلاخیں بنائیں!

ہم ان کا استعمال کرتے ہوئے طول و عرض کی وضاحت کرکے شروع کرتے ہیں۔ 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);
}

اسی سی ایس ایس متغیر کا استعمال کرتے ہوئے، --_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; }

اب، ہمیں صرف اونچائی کو متحرک کرنا ہے اور کچھ تاخیر کا اضافہ کرنا ہے! یہاں تین مثالیں ہیں جہاں رنگ اور سائز مختلف ہیں:

اپ ریپنگ

مجھے امید ہے کہ اب تک آپ ان تمام طاقتوں سے انتہائی حوصلہ افزائی محسوس کر رہے ہیں جو آپ کے پاس پیچیدہ نظر آنے والی لوڈنگ اینیمیشنز بنانے کے لیے ہیں۔ ہمیں صرف ایک عنصر کی ضرورت ہے، سلاخوں کو اپنی طرف متوجہ کرنے کے لیے گریڈیئنٹس یا سیوڈوز، پھر چیزوں کو ادھر ادھر منتقل کرنے کے لیے کچھ کلیدی فریم۔ لامتناہی امکانات حاصل کرنے کا یہ پورا نسخہ ہے، لہذا باہر جائیں اور کچھ صاف ستھری چیزیں پکانا شروع کریں!

اگلے مضمون تک، میں آپ کو لوڈرز کا ایک مضحکہ خیز مجموعہ چھوڑ دوں گا جہاں میں جمع کر رہا ہوں۔ نقطے اور سلاخوں!

---

سنگل عنصر لوڈرز: بارز اصل میں شائع ہوا سی ایس ایس - ٹیکنیکس. تمہیں چاہئے نیوز لیٹر حاصل کریں.

• سکے سمارٹ۔ یورپ کا بہترین بٹ کوائن اور کرپٹو ایکسچینج۔
• پلیٹو بلاک چین۔ Web3 Metaverse انٹیلی جنس۔ علم میں اضافہ۔ مفت رسائی۔
• کرپٹو ہاک۔ Altcoin ریڈار. مفت جانچ.
• ماخذ: https://css-tricks.com/single-element-loaders-the-bars/