سنگل ایلیمنٹ لوڈرز: 3D جا رہا ہے!

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

اسپلٹ کیوب لوڈر

یہاں ایک 3D لوڈر ہے جہاں ایک کیوب کو دو حصوں میں تقسیم کیا جاتا ہے، لیکن صرف ایک عنصر کے ساتھ بنایا جاتا ہے:

کیوب کا ہر نصف ایک چھدم عنصر کا استعمال کرتے ہوئے بنایا گیا ہے:

ٹھنڈا، ٹھیک ہے؟! ہم سی ایس ایس کے ساتھ کونک گریڈینٹ استعمال کر سکتے ہیں۔ clip-path عنصر پر ::before اور ::after ایک 3D کیوب کے تین نظر آنے والے چہروں کی نقل کرنے کے لیے چھدم۔ منفی حاشیہ وہ ہے جو ایک مکمل کیوب کو اوورلیپ کرنے اور ان کی نقل کرنے کے لیے دو سیڈو کو ایک ساتھ کھینچتا ہے۔ ہمارا باقی کام زیادہ تر صاف نظر آنے والے لوڈرز حاصل کرنے کے لیے ان دو حصوں کو متحرک کر رہا ہے!

آئیے ایک بصری کو چیک کریں جو اس کیوب نما عنصر کو بنانے کے لیے استعمال ہونے والے کلپ پاتھ پوائنٹس کے پیچھے ریاضی کی وضاحت کرتا ہے:

ہمارے پاس ہمارے متغیرات اور ایک مساوات ہیں، تو آئیے ان کو کام پر لگائیں۔ سب سے پہلے، ہم اپنے متغیرات قائم کریں گے اور مین کے لیے سائز سیٹ کریں گے۔ .loader عنصر:

.loader { --s: 150px; /* control the size */ --_d: calc(0.353 * var(--s)); /* 0.353 = sin(45deg)/2 */ width: calc(var(--s) + var(--_d)); aspect-ratio: 1; display: flex;
}

اب تک کچھ بھی پاگل نہیں ہے۔ ہمارے پاس اے 150px مربع جو ایک لچکدار کنٹینر کے طور پر ترتیب دیا گیا ہے۔ اب ہم اپنے چھدم قائم کرتے ہیں:

.loader::before,
.loader::after { content: ""; flex: 1;
}

وہ میں دو حصے ہیں۔ .loader کنٹینر ہمیں ان میں پینٹ کرنے کی ضرورت ہے، تاکہ وہیں ہماری مخروطی میلان میں لاتیں:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}

میلان موجود ہے، لیکن یہ عجیب لگ رہا ہے. ہمیں چائیے کہ اسے عنصر پر کلپ کریں۔:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0); clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}

آئیے اس بات کو یقینی بنائیں کہ دونوں حصے a کے ساتھ اوورلیپ ہوں۔ منفی مارجن:

.loader::before { margin-right: calc(var(--_d) / -2);
} .loader::after { margin-left: calc(var(--_d) / -2);
}

اب آئیے انہیں حرکت دیں!

.loader::before,
.loader::after { /* same as before */ animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
} .loader::after { /* same as before */ animation-delay: -.75s
} @keyframes load{ 0%, 40% { transform: translateY(calc(var(--s) / -4)) } 60%, 100% { transform: translateY(calc(var(--s) / 4)) }
}

یہاں ایک بار پھر آخری ڈیمو ہے:

پروگریس کیوب لوڈر

آئیے 3D پروگریس لوڈر بنانے کے لیے اسی تکنیک کا استعمال کریں۔ ہاں، اب بھی صرف ایک عنصر!

ہم لوڈر کی اونچائی اور پہلو کے تناسب کو تبدیل کرنے کے علاوہ کسی چیز کو تبدیل نہیں کر رہے ہیں جہاں تک کیوب کو اسی طرح سے نقل کر رہے ہیں جس طرح ہم نے پہلے کیا تھا۔ ہم جو اینی میشن بنا رہے ہیں وہ حیرت انگیز طور پر آسان تکنیک پر انحصار کرتی ہے جہاں ہم بائیں جانب کی چوڑائی کو اپ ڈیٹ کرتے ہیں جبکہ دائیں جانب باقی جگہ کو بھرتا ہے، شکریہ flex-grow: 1.

پہلا قدم دائیں طرف کا استعمال کرتے ہوئے کچھ شفافیت شامل کرنا ہے۔ opacity:

یہ اس اثر کی نقل کرتا ہے کہ کیوب کا ایک سائیڈ بھرا ہوا ہے جبکہ دوسرا خالی ہے۔ پھر ہم بائیں جانب کا رنگ اپ ڈیٹ کرتے ہیں۔ ایسا کرنے کے لیے، ہم یا تو مخروطی میلان کے اندر تین رنگوں کو اپ ڈیٹ کرتے ہیں یا ہم اسے ایک کے ساتھ پس منظر کا رنگ شامل کرکے کرتے ہیں۔ background-blend-mode:

.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply;
}

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

آئیے لوڈر کے بائیں جانب کی چوڑائی کو متحرک کریں:

افوہ، حرکت پذیری شروع میں تھوڑی عجیب ہے! غور کریں کہ یہ مکعب سے باہر کیسے شروع ہوتا ہے؟ اس کی وجہ یہ ہے کہ ہم اینیمیشن شروع کر رہے ہیں۔ 0% چوڑائی لیکن کی وجہ سے clip-path اور منفی مارجن جو ہم استعمال کر رہے ہیں، اس کے بجائے ہمیں کیا کرنے کی ضرورت ہے۔ --_d متغیر، جس کی ہم تعریف کرتے تھے۔ clip-path پوائنٹس اور منفی مارجن:

@keyframes load { 0%, 5% {width: var(--_d); } 95%, 100% {width: 100%; }
}

یہ تھوڑا بہتر ہے:

لیکن ہم اس اینیمیشن کو اور بھی ہموار بنا سکتے ہیں۔ کیا آپ نے محسوس کیا کہ ہم کچھ کھو رہے ہیں؟ اس آخری ڈیمو کے ساتھ حتمی ڈیمو کیسا ہونا چاہیے اس کا موازنہ کرنے کے لیے میں آپ کو ایک اسکرین شاٹ دکھاتا ہوں:

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

ہم مرکزی عنصر میں ایک میلان شامل کر سکتے ہیں اور اسے کلپ کر سکتے ہیں جیسا کہ ہم نے چھدم کے ساتھ کیا تھا:

background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;

ایک بار جب سب کچھ ایک ساتھ کھینچ لیا جائے تو مکمل کوڈ یہ ہے:

.loader { --s: 100px; /* control the size */ --_d: calc(0.353*var(--s)); /* 0.353 = sin(45deg) / 2 */ height: var(--s); aspect-ratio: 3; display: flex; background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat; clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}
.loader::before,
.loader::after { content: ""; clip-path: inherit; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}
.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply; margin-right: calc(var(--_d) / -2); animation: load 2.5s infinite linear;
}
.loader:after { flex: 1; margin-left: calc(var(--_d) / -2); opacity: 0.4;
} @keyframes load { 0%, 5% { width: var(--_d); } 95%, 100% { width: 100%; }
}

یہی ہے! ہم نے ابھی ایک چالاک تکنیک کا استعمال کیا ہے جس میں چھدم عناصر، کونک گریڈینٹ، کلپنگ، بیک گراؤنڈ بلینڈنگ، اور منفی مارجن کا استعمال کیا گیا ہے، ایک نہیں بلکہ دو میٹھے نظر آنے والے 3D لوڈرز جس میں مارک اپ میں ایک عنصر سے زیادہ کچھ نہیں ہے۔

مزید 3D

ہم اب بھی آگے جا سکتے ہیں اور ایک عنصر کا استعمال کرتے ہوئے 3D کیوبز کی لامحدود تعداد کی تقلید کر سکتے ہیں — ہاں، یہ ممکن ہے! یہاں کیوبز کا ایک گرڈ ہے:

یہ ڈیمو اور درج ذیل ڈیمو لکھنے کے وقت سفاری میں غیر تعاون یافتہ ہیں۔

پاگل، ٹھیک ہے؟ اب ہم ایک عنصر کا استعمال کرتے ہوئے بنائے گئے کیوبز کا ایک بار بار پیٹرن بنا رہے ہیں… اور نہ ہی کوئی چھدم! میں اس ریاضی کے بارے میں اچھی تفصیل میں نہیں جاؤں گا جو ہم استعمال کر رہے ہیں (وہاں بہت مخصوص نمبر موجود ہیں) لیکن یہ تصور کرنے کے لئے ایک اعداد و شمار ہے کہ ہم یہاں کیسے پہنچے:

ہم سب سے پہلے ایک استعمال کرتے ہیں conic-gradient دہرانے والا کیوب پیٹرن بنانے کے لیے۔ پیٹرن کی تکرار کو تین متغیرات کے ذریعے کنٹرول کیا جاتا ہے:

• --size: اس کے نام کے مطابق، یہ ہر مکعب کے سائز کو کنٹرول کرتا ہے۔
• --m: یہ کالموں کی تعداد کو ظاہر کرتا ہے۔
• --n: یہ قطاروں کی تعداد ہے۔
• --gap: یہ کیوبز کے درمیان فاصلہ یا فاصلہ ہے۔

.cube { --size: 40px; --m: 4; --n: 5; --gap :10px; aspect-ratio: var(--m) / var(--n); width: calc(var(--m) * (1.353 * var(--size) + var(--gap))); background: conic-gradient(from -90deg at var(--size) calc(0.353 * var(--size)), #249FAB 135deg, #81C5A3 0 270deg, #26609D 0) /* update the colors here */ 0 0 / calc(100% / var(--m)) calc(100% / var(--n));
}

پھر ہم ایک ہی سائز کے دوسرے پیٹرن کا استعمال کرتے ہوئے ماسک کی تہہ لگاتے ہیں۔ یہ اس خیال کا سب سے مشکل حصہ ہے۔ کا ایک مجموعہ استعمال کرتے ہوئے a linear-gradient اور ایک conic-gradient ہم اپنے عنصر کے چند حصوں کو کاٹ دیں گے تاکہ صرف کیوب کی شکلیں نظر آئیں۔

.cube { /* etc. */ mask: linear-gradient(to bottom right, #0000 calc(0.25 * var(--size)), #000 0 calc(100% - calc(0.25 * var(--size)) - 1.414 * var(--gap)), #0000 0), conic-gradient(from -90deg at right var(--gap) bottom var(--gap), #000 90deg, #0000 0); mask-size: calc(100% / var(--m)) calc(100% / var(--n)); mask-composite: intersect;
}

کوڈ تھوڑا پیچیدہ لگ سکتا ہے لیکن CSS متغیرات کی بدولت ہمیں اپنے میٹرکس آف کیوبز کو کنٹرول کرنے کے لیے چند اقدار کو اپ ڈیٹ کرنے کی ضرورت ہے۔ 10⨉10 گرڈ کی ضرورت ہے؟ اپ ڈیٹ کریں۔ --m اور --n متغیرات 10. کیوب کے درمیان ایک وسیع فرق کی ضرورت ہے؟ اپ ڈیٹ کریں۔ --gap قدر. رنگ کی قدریں صرف ایک بار استعمال ہوتی ہیں، اس لیے انہیں نئے رنگ پیلیٹ کے لیے اپ ڈیٹ کریں!

اب جب کہ ہمارے پاس ایک اور 3D تکنیک ہے، آئیے اسے مختلف اینیمیشنز کے ساتھ کھیل کر لوڈر کی مختلف حالتوں کو بنانے کے لیے استعمال کریں۔ مثال کے طور پر، بائیں سے دائیں طرف لامحدود سلائیڈنگ کیوبز کے دہرائے جانے والے پیٹرن کے بارے میں کیا خیال ہے؟

یہ لوڈر ایک قطار میں چار کیوبز کی وضاحت کرتا ہے۔ یعنی ہمارا --n قدر ہے 4 اور --m مساوی ہے 1 . دوسرے الفاظ میں، ہمیں اب ان کی ضرورت نہیں ہے!

اس کے بجائے، ہم کے ساتھ کام کر سکتے ہیں --size اور --gap گرڈ کنٹینر میں متغیرات:

.loader { --size: 70px; --gap: 15px; width: calc(3 * (1.353 * var(--size) + var(--gap))); display: grid; aspect-ratio: 3;
}

یہ ہمارا کنٹینر ہے۔ ہمارے پاس چار کیوبز ہیں، لیکن ایک وقت میں کنٹینر میں صرف تین دکھانا چاہتے ہیں تاکہ ہمارے پاس ہمیشہ ایک سلائیڈ ہوتا رہے جیسا کہ ایک باہر پھسل رہا ہے۔ اسی لیے ہم چوڑائی کو فیکٹر کر رہے ہیں۔ 3 اور اسپیکٹ ریشو کو سیٹ کریں۔ 3 ساتھ ہی.

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

.loader::before { content: ""; width: calc(4 * 100% / 3); /* Code to create four cubes */
}

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

.loader { /* same as before */ justify-content: end;
}

گرڈ کنٹینر کی حدود کو ظاہر کرنے کے لیے سرخ خاکہ کے ساتھ، ہمارے پاس اب تک کیا ہے:

اب ہمیں بس اپنی اینیمیشن کو شامل کرکے سیوڈو عنصر کو دائیں طرف منتقل کرنا ہے:

@keyframes load { to { transform: translate(calc(100% / 4)); }
}

کیا آپ کو حرکت پذیری کی چال ملی؟ آئیے اس کو ختم کرتے ہیں اوور فلونگ کیوب پیٹرن کو چھپا کر اور ماسکنگ کا ایک ٹچ شامل کرکے اس دھندلا اثر پیدا کرنے کے لیے جو آغاز اور اختتام ہوتا ہے:

.loader { --size: 70px; --gap: 15px; width: calc(3*(1.353*var(--s) + var(--g))); display: grid; justify-items: end; aspect-ratio: 3; overflow: hidden; mask: linear-gradient(90deg, #0000, #000 30px calc(100% - 30px), #0000);
}

ہم ایک متغیر کو متعارف کروا کر اسے بہت زیادہ لچکدار بنا سکتے ہیں، --nیہ طے کرنے کے لیے کہ کنٹینر میں ایک ساتھ کتنے کیوب دکھائے جاتے ہیں۔ اور چونکہ پیٹرن میں کیوبز کی کل تعداد ایک سے زیادہ ہونی چاہیے۔ --n، ہم اس کا اظہار کر سکتے ہیں۔ calc(var(--n) + 1).

یہاں پوری چیز ہے:

ٹھیک ہے، ایک اور 3D لوڈر جو ملتا جلتا ہے لیکن اس میں کیوبز سلائیڈنگ کے بجائے یکے بعد دیگرے رنگ بدلتے ہیں:

ہم کے ساتھ ایک متحرک پس منظر پر انحصار کرنے جا رہے ہیں background-blend-mode اس کے لیے:

.loader { /* ... */ background: linear-gradient(#ff1818 0 0) 0% / calc(100% / 3) 100% no-repeat, /* ... */; background-blend-mode: multiply; /* ... */ animation: load steps(3) 1.5s infinite;
}
@keyframes load { to { background-position: 150%; }
}

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

وہاں سے، یہ پس منظر کے میلان کو متحرک کر رہا ہے۔ background-position کیوبز کو جھپکنے والے رنگوں کو ایک وقت میں ایک تین قدمی حرکت پذیری کے طور پر۔

اگر آپ ان اقدار سے واقف نہیں ہیں جن کے لیے میں استعمال کر رہا ہوں۔ background-position اور پس منظر کا نحو، میں انتہائی سفارش کرتا ہوں۔ میرے پچھلے مضامین میں سے ایک اور میں سے ایک میرے اسٹیک اوور فلو جوابات. آپ کو وہاں بہت تفصیلی وضاحت ملے گی۔

کیا ہم اسے متغیر بنانے کے لیے کیوبز کی تعداد کو اپ ڈیٹ کر سکتے ہیں؟

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

تغیرات بہت زیادہ ہیں!

اس سیریز کے دیگر تین مضامین کی طرح، میں آپ کو آگے بڑھنے اور اپنے لوڈرز بنانے کے لیے کچھ پریرتا چھوڑنا چاہوں گا۔ یہ ایک مجموعہ ہے جس میں وہ 3D لوڈرز شامل ہیں جو ہم نے مل کر بنائے ہیں، اور آپ کے تخیل کو آگے بڑھانے کے لیے کچھ دیگر:

یہ ایک لپیٹ ہے

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

اس چھوٹی سی سیریز کو پڑھنے کے لئے ایک بار پھر شکریہ! میں آپ کو یاد دلاتے ہوئے سائن آف کروں گا کہ میرے پاس ایک ہے۔ 500 سے زیادہ لوڈرز کا مجموعہ اگر آپ مزید آئیڈیاز اور پریرتا تلاش کر رہے ہیں۔

---

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

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