سنگل عنصر لوڈرز: نقطے۔

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

ڈاٹ لوڈرز ہر جگہ موجود ہیں۔ وہ صاف ستھرے ہیں کیونکہ وہ عام طور پر تین نقطوں پر مشتمل ہوتے ہیں جو کہ متن بیضوی (…) کی طرح نظر آتے ہیں جو ارد گرد رقص کرتے ہیں۔

ہمارا مقصد یہاں ایک ہی div عنصر سے اسی چیز کو بنانا ہے۔ دوسرے الفاظ میں، ہر ڈاٹ کے لیے کوئی ایک div فی ڈاٹ یا انفرادی اینیمیشن نہیں ہے۔

اوپر والے لوڈر کی وہ مثال ایک واحد div عنصر، چند CSS ڈیکلریشنز، اور کوئی چھدم عناصر کے ساتھ بنائی گئی ہے۔ میں سی ایس ایس کا استعمال کرتے ہوئے دو تکنیکوں کو ملا رہا ہوں۔ background اور mask. اور جب ہم کام کر لیں گے، تو ہم دیکھیں گے کہ کس طرح پس منظر کے میلان کو متحرک کرنے سے ہر نقطے کے بدلتے رنگوں کا بھرم پیدا کرنے میں مدد ملتی ہے کیونکہ وہ یکے بعد دیگرے اوپر اور نیچے جاتے ہیں۔

پس منظر کی حرکت پذیری۔

آئیے بیک گراؤنڈ اینیمیشن سے شروع کریں:

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

مجھے امید ہے کہ یہ بہت سیدھا لگتا ہے۔ ہمارے پاس کیا ہے a 180pxوائڈ .loader عنصر جو دو مخروطی میلان دکھاتا ہے جو سخت رنگوں کو کھیلتے ہوئے ہر دو رنگوں کے درمیان رک جاتا ہے — پہلا میلان سرخ اور نیلے رنگ کے اوپری نصف کے ساتھ ہوتا ہے۔ .loader، اور دوسرا میلان نچلے نصف کے ساتھ سبز اور جامنی ہے۔

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

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

حرکت پذیری میں، نوٹس کریں کہ پہلی پرت ہے Y=0% (سب سے اوپر رکھا ہوا) جبکہ X سے تبدیلیاں ہیں 0% کرنے کے لئے 100%. دوسری پرت کے لیے، ہمارے پاس اسی کے لیے ہے۔ X لیکن Y=100% (نیچے میں رکھا گیا)۔

کیوں استعمال کرتے ہوئے a conic-gradient() بجائے linear-gradient()?

اچھا سوال! بدیہی طور پر، ہمیں اس طرح دو رنگوں کے میلان بنانے کے لیے لکیری میلان کا استعمال کرنا چاہیے:

linear-gradient(90deg, red 50%, blue 0)

لیکن ہم ایک کا استعمال کرتے ہوئے بھی اسی تک پہنچ سکتے ہیں۔ conic-gradient() - اور کم کوڈ کے ساتھ۔ ہم کوڈ کو کم کرتے ہیں اور اس عمل میں ایک نئی چال بھی سیکھتے ہیں!

رنگوں کو بائیں اور دائیں سلائیڈ کرنا یہ ظاہر کرنے کا ایک اچھا طریقہ ہے کہ ہم رنگ تبدیل کر رہے ہیں، لیکن یہ بہتر ہو سکتا ہے کہ اگر ہم اس کے بجائے فوری طور پر رنگ تبدیل کریں — اس طرح، لوڈر ڈاٹ کے ایک ہی وقت میں دو رنگوں کو چمکانے کا کوئی امکان نہیں ہے۔ . ایسا کرنے کے لیے، آئیے تبدیل کریں۔ animationسے ٹائمنگ فنکشن linear کرنے کے لئے steps(1)

لوڈر کے نقطے

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

ہم استعمال کرنے جا رہے ہیں radial-gradient() اس کے لیے:

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

وہاں کچھ ڈپلیکیٹ کوڈ ہے، تو آئیے چیزوں کو کم کرنے کے لیے ایک CSS متغیر بنائیں:

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

ٹھنڈا ٹھنڈا. لیکن اب ہمیں ایک نئی اینیمیشن کی ضرورت ہے جو اینیمیٹڈ گریڈیئنٹس کے درمیان نقطوں کو اوپر اور نیچے منتقل کرنے میں مدد کرے۔

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

ہاں، وہاں کل تین ریڈیل گریڈینٹ ہیں، سبھی ایک ہی ترتیب اور ایک ہی سائز کے ساتھ — اینیمیشن ہر ایک کی پوزیشن کو اپ ڈیٹ کر دے گی۔ نوٹ کریں کہ X ہر نقطے کا کوآرڈینیٹ مقرر ہے۔ دی mask-position اس کی تعریف اس طرح کی گئی ہے کہ پہلا نقطہ بائیں طرف ہے (0%)، دوسرا مرکز میں (50%)، اور تیسرا دائیں طرف (100%)۔ ہم صرف اپ ڈیٹ کرتے ہیں۔ Y سے کوآرڈینیٹ 0% کرنے کے لئے 100% نقطوں کو رقص کرنے کے لیے۔

ہمیں جو ملتا ہے وہ یہ ہے:

اب، اسے ہماری تدریجی حرکت پذیری کے ساتھ جوڑیں اور جادو ہونے لگتا ہے:

ڈاٹ لوڈر کے تغیرات

سی ایس ایس متغیر جو ہم نے آخری مثال میں بنایا ہے اس سے نئے رنگوں میں تبادلہ کرنا اور اسی لوڈر کے مزید تغیرات پیدا کرنا بہت آسان ہے۔ مثال کے طور پر، مختلف رنگ اور سائز:

ہمارے نقطوں کے لیے ایک اور تحریک کا کیا ہوگا؟

یہاں، میں نے مختلف پوزیشنوں پر غور کرنے کے لیے اینیمیشن کو اپ ڈیٹ کرنا تھا، اور ہمیں اسی کوڈ کے ڈھانچے کے ساتھ دوسرا لوڈر ملتا ہے!

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

ایک نقطے والا لوڈر کیوں نہیں؟

اس کو گروک کرنا کافی آسان ہونا چاہئے کیونکہ میں وہی تکنیک استعمال کر رہا ہوں لیکن زیادہ آسان منطق کے ساتھ:

یہاں لوڈر کی ایک اور مثال ہے جہاں میں بھی متحرک ہوں۔ radial-gradient مشترکہ کے ساتھ سی ایس ایس فلٹرز اور mix-blend-mode ایک blobby اثر بنانے کے لئے:

اگر آپ کوڈ چیک کرتے ہیں، تو آپ دیکھیں گے کہ میں جو کچھ بھی کر رہا ہوں وہ اینیمیٹ کر رہا ہے۔ background-position، بالکل اسی طرح جیسے ہم نے پچھلے لوڈر کے ساتھ کیا تھا، لیکن ڈیش کا اضافہ کرنا background-size یہ دیکھنے کے لیے کہ بلاب بڑا ہوتا جاتا ہے کیونکہ یہ نقطوں کو جذب کرتا ہے۔

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

یہاں ایک اور ڈاٹ لوڈر خیال ہے، اس بار ایک مختلف تکنیک کا استعمال کرتے ہوئے:

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

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

مزید مثالیں!

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

اگلا…

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

---

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

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