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

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

میں نے 500 سے زیادہ سنگل ڈیو لوڈرز کا مجموعہ بنایا اور اس چار حصوں کی سیریز میں، میں ان چالوں کا اشتراک کرنے جا رہا ہوں جو میں نے ان میں سے بہت سے بنانے کے لیے استعمال کیے تھے۔ ہم مثالوں کی ایک بڑی تعداد کا احاطہ کریں گے، جس میں دکھایا جائے گا کہ کس طرح چھوٹی ایڈجسٹمنٹ تفریحی تغیرات کا باعث بن سکتی ہیں، اور یہ سب کچھ کرنے کے لیے ہمیں کتنا کم کوڈ لکھنے کی ضرورت ہے!

اس پہلے مضمون کے لیے، ہم لوڈر کے زیادہ عام نمونوں میں سے ایک بنانے جا رہے ہیں: اسپننگ بارز:

یہاں نقطہ نظر ہے

اس لوڈر کے لیے ایک معمولی عمل یہ ہے کہ پیرنٹ ایلیمنٹ (کل نو عناصر کے لیے) کے اندر لپیٹے ہوئے ہر بار کے لیے ایک عنصر بنائیں، پھر اس کے ساتھ کھیلیں opacity اور transform کتائی اثر حاصل کرنے کے لئے.

میرے نفاذ کے لیے، اگرچہ، صرف ایک عنصر کی ضرورت ہے:

<div class="loader"></div>

…اور 10 CSS اعلانات:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

آئیے اسے توڑ دیں۔

پہلی نظر میں، کوڈ عجیب لگ سکتا ہے لیکن آپ دیکھیں گے کہ یہ آپ کے خیال سے کہیں زیادہ آسان ہے۔ پہلا قدم عنصر کے طول و عرض کی وضاحت کرنا ہے۔ ہمارے معاملے میں، یہ ایک ہے 150px مربع. ہم ڈال سکتے ہیں۔ aspect-ratio استعمال کریں تاکہ عنصر مربع رہے چاہے کچھ بھی ہو۔

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

CSS لوڈرز بناتے وقت، میں ہمیشہ مجموعی سائز کو کنٹرول کرنے کے لیے ایک قدر رکھنے کی کوشش کرتا ہوں۔ اس صورت میں، یہ ہے width اور ہم جن حسابات کا احاطہ کرتے ہیں وہ اس قدر کا حوالہ دیتے ہیں۔ یہ مجھے لوڈر کو کنٹرول کرنے کے لیے ایک ہی قدر کو تبدیل کرنے کی اجازت دیتا ہے۔ یہ ہمیشہ اہم ہوتا ہے کہ ہم اپنے لوڈرز کے سائز کو آسانی سے ایڈجسٹ کرنے کے قابل ہو جائیں بغیر بہت ساری اضافی اقدار کو ایڈجسٹ کرنے کی ضرورت ہے۔

اگلا، ہم سلاخوں کو بنانے کے لیے گریڈینٹ استعمال کریں گے۔ یہ سب سے مشکل حصہ ہے! آئیے استعمال کرتے ہیں۔ ایک بنانے کے لیے میلان دو نیچے کی طرح سلاخیں:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

ہمارے گریڈینٹ کی وضاحت ایک رنگ اور دو رنگوں کے اسٹاپس سے کی گئی ہے۔ نتیجہ ایک ٹھوس رنگ ہے جس میں کوئی دھندلاہٹ یا ٹرانزیشن نہیں ہے۔ سائز کے برابر ہے۔ 34% وسیع اور 8% لمبا یہ مرکز میں بھی رکھا گیا ہے (50%)۔ چال کلیدی الفاظ کی قدر کا استعمال ہے۔ space - یہ میلان کو نقل کرتا ہے، ہمیں دو کل بار دیتا ہے۔

سے تفصیلات:

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

میں چوڑائی کے برابر استعمال کر رہا ہوں۔ 34% جس کا مطلب ہے کہ ہمارے پاس دو سے زیادہ بار نہیں ہو سکتے (3*34% سے بڑا ہے 100%لیکن دو سلاخوں کے ساتھ ہمارے پاس خالی جگہیں ہوں گی (100% - 2 * 34% = 32%)۔ وہ جگہ دو سلاخوں کے درمیان بیچ میں رکھی گئی ہے۔ دوسرے لفظوں میں، ہم اس میلان کے لیے چوڑائی استعمال کرتے ہیں جو کہ درمیان میں ہے۔ 33% اور 50% اس بات کو یقینی بنانے کے لیے کہ ہمارے پاس کم از کم دو سلاخیں ہیں جن کے درمیان تھوڑی سی جگہ ہے۔ قدر space وہی ہے جو انہیں ہمارے لئے صحیح طور پر رکھتا ہے۔

ہم ایسا ہی کرتے ہیں اور اوپر اور نیچے دو مزید سلاخوں کو حاصل کرنے کے لیے دوسرا اسی طرح کا میلان بناتے ہیں، جو ہمیں ایک background کی جائیداد کی قیمت:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

ہم اعادہ سے بچنے کے لیے CSS متغیر کا استعمال کرتے ہوئے اسے بہتر بنا سکتے ہیں:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

لہذا، اب ہمارے پاس چار بارز ہیں اور، CSS متغیرات کی بدولت، ہم ایک بار کلر ویلیو لکھ سکتے ہیں جس سے بعد میں اپ ڈیٹ کرنا آسان ہو جاتا ہے (جیسا کہ ہم نے لوڈر کے سائز کے ساتھ کیا تھا)۔

باقی بارز بنانے کے لیے، آئیے ٹیپ کرتے ہیں۔ .loader عنصر اور اس کے ::before چھدم عنصر مجموعی طور پر آٹھ کے لئے چار مزید بار حاصل کرنے کے لئے۔

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

کے استعمال کو نوٹ کریں۔ display: grid. یہ ہمیں گرڈ کے ڈیفالٹ پر انحصار کرنے کی اجازت دیتا ہے۔ stretch سیڈو عنصر کو اس کے والدین کے پورے علاقے کا احاطہ کرنے کے لئے سیدھ؛ اس طرح اس پر کوئی طول و عرض بتانے کی ضرورت نہیں ہے — ایک اور چال جو کوڈ کو کم کرتی ہے اور ہمیں بہت ساری اقدار سے نمٹنے سے گریز کرتی ہے!

اب آئیے چھدم عنصر کو اس کے ذریعے گھمائیں۔ 45deg باقی سلاخوں کی پوزیشن کے لئے. چال کو دیکھنے کے لیے درج ذیل ڈیمو کو ہوور کریں:

دھندلاپن کی ترتیب

ہم جو کچھ کرنے کی کوشش کر رہے ہیں وہ یہ تاثر پیدا کرنا ہے کہ ایک بار ہے جو اپنے پیچھے دھندلا ہوا سلاخوں کا ایک پگڈنڈی چھوڑ دیتا ہے جب یہ ایک سرکلر راستے پر سفر کرتی ہے۔ ہمیں اب ضرورت اس بات کی ہے کہ ہم اپنی سلاخوں کی شفافیت کے ساتھ اس ٹریل کو بنائیں، جو ہم CSS کے ساتھ کرنے جا رہے ہیں۔ mask مندرجہ ذیل طور پر ایک مخروطی میلان کے ساتھ مل کر:

mask: conic-gradient(from 22deg,#0003,#000);

چال کو بہتر طور پر دیکھنے کے لیے، آئیے اسے پورے رنگ کے باکس پر لاگو کریں:

سرخ رنگ کی شفافیت آہستہ آہستہ گھڑی کی سمت بڑھ رہی ہے۔ ہم اسے اپنے لوڈر پر لاگو کرتے ہیں اور ہمارے پاس مختلف دھندلاپن والی سلاخیں ہیں:

حقیقت میں، ہر بار دھندلا دکھائی دیتا ہے کیونکہ یہ ایک میلان سے نقاب پوش ہے اور دو نیم شفاف رنگوں کے درمیان آتا ہے۔ جب یہ چلتا ہے تو یہ مشکل سے قابل دید ہوتا ہے، لہذا یہ اس طرح کی بات ہے جیسے یہ کہنے کے قابل ہو کہ تمام سلاخوں کا رنگ ایک مختلف سطح کی دھندلاپن کے ساتھ ہے۔

گردش

آئیے اپنا لوڈر حاصل کرنے کے لیے روٹیشن اینیمیشن کا اطلاق کریں۔ نوٹ کریں کہ ہمیں ایک قدمی حرکت پذیری کی ضرورت ہے نہ کہ ایک مسلسل اس لیے میں استعمال کر رہا ہوں۔ steps(8). 8 سلاخوں کی تعداد کے سوا کچھ نہیں ہے، تاکہ اس قدر کو تبدیل کیا جا سکے اس بات پر منحصر ہے کہ کتنی بار استعمال میں ہیں۔

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

یہی ہے! ہمارے پاس ہمارا لوڈر ہے جس میں صرف ایک عنصر اور سی ایس ایس کی چند لائنیں ہیں۔ ہم ایک قدر کو ایڈجسٹ کرکے اس کے سائز اور رنگ کو آسانی سے کنٹرول کرسکتے ہیں۔

چونکہ ہم نے صرف استعمال کیا۔ ::before pseudo-element، ہم استعمال کر کے مزید چار بار شامل کر سکتے ہیں۔ ::after کل 12 سلاخوں کے ساتھ ختم کرنا اور تقریباً ایک ہی کوڈ:

ہم غور کرنے کے لیے اپنے سیوڈو عناصر کی گردش کو اپ ڈیٹ کرتے ہیں۔ 30deg اور 60deg بجائے 45deg آٹھ کے بجائے بارہ قدمی حرکت پذیری کا استعمال کرتے ہوئے میں نے اونچائی بھی کم کردی 5% بجائے 8% سلاخوں کو تھوڑا پتلا بنانے کے لیے۔

نوٹس، بھی، ہمارے پاس ہے grid-area: 1/1 چھدم عناصر پر یہ ہمیں انہیں ایک دوسرے کے ساتھ ایک ہی جگہ پر رکھنے کی اجازت دیتا ہے، ایک دوسرے کے اوپر سجا ہوا ہے۔

کیا لگتا ہے؟ ہم ایک اور نفاذ کا استعمال کرتے ہوئے اسی لوڈر تک پہنچ سکتے ہیں:

کیا آپ کوڈ کے پیچھے منطق کا پتہ لگا سکتے ہیں؟ یہاں ایک اشارہ ہے: دھندلاپن کو اب سی ایس ایس کے ساتھ سنبھالا نہیں جاتا ہے۔ mask لیکن میلان کے اندر اور بھی استعمال کر رہا ہے۔ opacity جائیداد.

اس کے بجائے نقطے کیوں نہیں؟

ہم مکمل طور پر یہ کر سکتے ہیں:

اگر آپ کوڈ چیک کرتے ہیں تو آپ دیکھیں گے کہ اب ہم لکیری کے بجائے ریڈیل گریڈینٹ کے ساتھ کام کر رہے ہیں۔ بصورت دیگر، تصور بالکل وہی ہے جہاں ماسک دھندلاپن کا تاثر پیدا کرتا ہے، لیکن ہم نے شکلوں کو لکیروں کے بجائے دائرے بنا دیا۔

ذیل میں نئی ​​تدریجی ترتیب کو واضح کرنے کے لیے ایک شکل دی گئی ہے:

اگر آپ سفاری استعمال کر رہے ہیں، تو نوٹ کریں کہ ڈیمو چھوٹی چھوٹی ہو سکتی ہے۔ اس کی وجہ یہ ہے کہ سفاری کے پاس فی الحال سپورٹ کا فقدان ہے۔ at ریڈیل گریڈینٹ میں نحو۔ لیکن ہم اس پر قابو پانے کے لیے میلان کو تھوڑا سا دوبارہ ترتیب دے سکتے ہیں:

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

لوڈر کی مزید مثالیں۔

پچھلے والے کی طرح اسپنر لوڈر کے لیے یہاں ایک اور آئیڈیا ہے۔

اس کے لیے، میں صرف اس پر بھروسہ کر رہا ہوں۔ background اور mask شکل بنانے کے لیے (کسی چھدم عناصر کی ضرورت نہیں)۔ میں سی ایس ایس متغیرات کے ساتھ کنفیگریشن کی بھی وضاحت کر رہا ہوں تاکہ ایک ہی کوڈ سے بہت سی تغیرات پیدا کر سکیں — صرف CSS متغیرات کی طاقتوں کی ایک اور مثال۔ میں نے اس تکنیک کے بارے میں ایک اور مضمون لکھا اگر آپ مزید تفصیلات چاہتے ہیں۔

نوٹ کریں کہ کچھ براؤزر اب بھی a پر انحصار کرتے ہیں۔ -webkit- کے لیے سابقہ mask-composite اپنی اقدار کے سیٹ کے ساتھ، اور ڈیمو میں اسپنر کو ظاہر نہیں کرے گا۔ یہاں ایسا کرنے کا ایک طریقہ ہے۔ بغیر mast-composite مزید براؤزر سپورٹ کے لیے۔

میرے پاس آپ کے لیے ایک اور ہے:

اس کے لیے، میں استعمال کر رہا ہوں a background-color رنگ کو کنٹرول کرنے اور استعمال کرنے کے لیے mask اور mask-composite حتمی شکل بنانے کے لیے:

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

اپ ریپنگ

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

یہ صرف شروعات ہے۔ اس سلسلے میں، ہم CSS لوڈرز بنانے کے لیے مزید آئیڈیاز اور جدید تصورات کو دیکھیں گے۔

---

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

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