صرف CSS لوڈرز بنانا میرے پسندیدہ کاموں میں سے ایک ہے۔ ان لامحدود متحرک تصاویر کو دیکھنا ہمیشہ اطمینان بخش ہوتا ہے۔ اور، یقینا، وہاں ہیں لاٹوں انہیں بنانے کے لیے تکنیکوں اور طریقوں کی - ضرورت نہیں۔ CodePen سے آگے دیکھیں صرف کتنے کو دیکھنے کے لئے. اس آرٹیکل میں، اگرچہ، ہم دیکھیں گے کہ کس طرح ممکن ہو سکے کے طور پر کم کوڈ لکھنے والے واحد عنصر لوڈر کو بنایا جائے۔
میں نے 500 سے زیادہ سنگل ڈیو لوڈرز کا مجموعہ بنایا اور اس چار حصوں کی سیریز میں، میں ان چالوں کا اشتراک کرنے جا رہا ہوں جو میں نے ان میں سے بہت سے بنانے کے لیے استعمال کیے تھے۔ ہم مثالوں کی ایک بڑی تعداد کا احاطہ کریں گے، جس میں دکھایا جائے گا کہ کس طرح چھوٹی ایڈجسٹمنٹ تفریحی تغیرات کا باعث بن سکتی ہیں، اور یہ سب کچھ کرنے کے لیے ہمیں کتنا کم کوڈ لکھنے کی ضرورت ہے!
سنگل عنصر لوڈرز سیریز:
- سنگل ایلیمنٹ لوڈرز: دی اسپنر۔ آپ یہاں ہیں
- سنگل عنصر لوڈرز: نقطے - 17 جون کو آرہا ہے۔
- سنگل عنصر لوڈرز: بارز - 24 جون کو آرہا ہے۔
- سنگل ایلیمینٹ لوڈرز: تھری ڈی جانا - 1 جولائی کو آنے والا ہے۔
اس پہلے مضمون کے لیے، ہم لوڈر کے زیادہ عام نمونوں میں سے ایک بنانے جا رہے ہیں: اسپننگ بارز:
یہاں نقطہ نظر ہے
اس لوڈر کے لیے ایک معمولی عمل یہ ہے کہ پیرنٹ ایلیمنٹ (کل نو عناصر کے لیے) کے اندر لپیٹے ہوئے ہر بار کے لیے ایک عنصر بنائیں، پھر اس کے ساتھ کھیلیں 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 لوڈرز بنانے کے لیے مزید آئیڈیاز اور جدید تصورات کو دیکھیں گے۔
سنگل عنصر لوڈرز سیریز:
- سنگل ایلیمنٹ لوڈرز: دی اسپنر۔ آپ یہاں ہیں
- سنگل عنصر لوڈرز: نقطے - 17 جون کو آرہا ہے۔
- سنگل عنصر لوڈرز: بارز - 24 جون کو آرہا ہے۔
- سنگل ایلیمینٹ لوڈرز: تھری ڈی جانا - 1 جولائی کو آنے والا ہے۔
سنگل عنصر لوڈرز: اسپنر اصل میں شائع ہوا سی ایس ایس - ٹیکنیکس. تمہیں چاہئے نیوز لیٹر حاصل کریں.
- "
- 10
- 3d
- a
- ہمارے بارے میں
- ایڈیشنل
- اعلی درجے کی
- تمام
- کی اجازت دیتا ہے
- ہمیشہ
- ایک اور
- کا اطلاق کریں
- درخواست دینا
- نقطہ نظر
- رقبہ
- مضمون
- پس منظر
- سلاکھون
- بنیادی طور پر
- کیونکہ
- اس سے پہلے
- شروع
- کیا جا رہا ہے
- نیچے
- کے درمیان
- بٹ
- باکس
- براؤزر
- عمارت
- گچرچھا
- تبدیل
- سرکل
- کوڈ
- مجموعہ
- مل کر
- کامن
- تصور
- ترتیب
- غور کریں
- مواد
- کنٹرول
- سکتا ہے
- جوڑے
- احاطہ
- تخلیق
- بنائی
- پیدا
- تخلیق
- اس وقت
- نمٹنے کے
- منحصر ہے
- تفصیلات
- DID
- مختلف
- طول و عرض
- دکھائیں
- نیچے
- آسانی سے
- اثر
- عناصر
- وغیرہ
- بالکل
- مثال کے طور پر
- مثال کے طور پر
- ورزش
- مرجھانا
- اعداد و شمار
- پہلا
- فٹ
- کے بعد
- مندرجہ ذیل ہے
- سے
- مزہ
- مزید
- دے
- نظر
- جا
- اچھا
- زیادہ سے زیادہ
- گرڈ
- اونچائی
- یہاں
- کس طرح
- کیسے
- HTTPS
- بھاری
- خیال
- خیالات
- تصویر
- تصاویر
- نفاذ
- اہم
- دیگر میں
- اضافہ
- IT
- جولائی
- قیادت
- جانیں
- سطح
- لائنوں
- تھوڑا
- لوڈ
- دیکھو
- تلاش
- بنا
- بنا
- بناتا ہے
- ماسک
- ماسک
- معاملہ
- کا مطلب ہے کہ
- شاید
- زیادہ
- تعداد
- کی اصلاح کریں
- دیگر
- دوسری صورت میں
- مجموعی طور پر
- خود
- کھیلیں
- پوزیشن
- ممکن
- پچھلا
- جائیداد
- سوال
- RE
- تک پہنچنے
- حقیقت
- باقی
- کی ضرورت ہے
- سفاری
- کہا
- اسی
- سیریز
- مقرر
- شکل
- سائز
- سیکنڈ اور
- اسی طرح
- سادہ
- ایک
- سائز
- چھوٹے
- So
- ٹھوس
- کچھ
- خلا
- خالی جگہیں
- چوک میں
- ابھی تک
- حمایت
- ٹیپ
- کاموں
- تکنیک
- ۔
- بات
- وقت
- سب سے اوپر
- چھو
- تبدیل
- شفافیت
- سفر
- اپ ڈیٹ کریں
- us
- استعمال کی شرائط
- قیمت
- W3
- کیا
- جبکہ
- کے اندر
- بغیر
- الفاظ
- کام کر
- تحریری طور پر