একক উপাদান লোডার: স্পিনার

শুধুমাত্র CSS-লোডার তৈরি করা আমার প্রিয় কাজগুলির মধ্যে একটি। সেই অসীম অ্যানিমেশনগুলি দেখতে সর্বদা সন্তোষজনক। এবং, অবশ্যই, আছে প্রচুর সেগুলি তৈরি করার কৌশল এবং পদ্ধতির - প্রয়োজন নেই কোডপেনের চেয়ে আরও দেখুন মাত্র কতজন দেখতে। এই নিবন্ধে, যদিও, আমরা দেখব কিভাবে একটি একক উপাদান লোডার যতটা সম্ভব কম কোড লিখতে হয়।

আমার আছে 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) }
}

এটাই! আমাদের লোডারে শুধুমাত্র একটি উপাদান এবং CSS এর কয়েকটি লাইন রয়েছে। আমরা সহজেই একটি মান সামঞ্জস্য করে এর আকার এবং রঙ নিয়ন্ত্রণ করতে পারি।

যেহেতু আমরা শুধুমাত্র ব্যবহার করেছি ::before সিউডো-এলিমেন্ট, আমরা ব্যবহার করে আরও চারটি বার যোগ করতে পারি ::after মোট 12 বার এবং প্রায় একই কোড দিয়ে শেষ করতে:

আমরা বিবেচনা করার জন্য আমাদের ছদ্ম-উপাদানগুলির ঘূর্ণন আপডেট করি 30deg এবং 60deg পরিবর্তে 45deg আটের পরিবর্তে একটি বারো-পদক্ষেপ অ্যানিমেশন ব্যবহার করার সময়। আমিও উচ্চতা কমিয়ে দিলাম 5% পরিবর্তে 8% বার একটু পাতলা করতে.

লক্ষ্য করুন, খুব, যে আমরা আছে grid-area: 1/1 ছদ্ম-উপাদান উপর. এটি আমাদেরকে একে অপরের মতো একই এলাকায় স্থাপন করতে দেয়, একে অপরের উপরে স্তুপীকৃত।

অনুমান কি? আমরা অন্য বাস্তবায়ন ব্যবহার করে একই লোডারের জন্য পৌঁছাতে পারি:

আপনি কোডের পিছনে যুক্তি খুঁজে বের করতে পারেন? এখানে একটি ইঙ্গিত: অস্বচ্ছতা আর CSS দিয়ে পরিচালনা করা হয় না 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 ভেরিয়েবলের সাথে কনফিগারেশনকেও সংজ্ঞায়িত করছি - শুধুমাত্র CSS ভেরিয়েবলের ক্ষমতার আরেকটি উদাহরণ। আমি এই কৌশল সম্পর্কে আরেকটি নিবন্ধ লিখেছিলাম আপনি আরো বিস্তারিত জানতে চান.

উল্লেখ্য যে কিছু ব্রাউজার এখনও একটি উপর নির্ভর করে -webkit- জন্য উপসর্গ mask-composite তার নিজস্ব মান সেট সহ, এবং ডেমোতে স্পিনার প্রদর্শন করবে না। এখানে এটা করার একটি উপায় আছে ছাড়া mast-composite আরও ব্রাউজার সমর্থনের জন্য।

আমি আপনার জন্য আরেকটি আছে:

এই এক জন্য, আমি একটি ব্যবহার করছি background-color রঙ নিয়ন্ত্রণ, এবং ব্যবহার mask এবং mask-composite চূড়ান্ত আকৃতি তৈরি করতে:

আমরা শেষ করার আগে, এখানে আরও কিছু স্পিনিং লোডার রয়েছে যা আমি কিছুক্ষণ আগে তৈরি করেছি। আমি বিভিন্ন কৌশলের উপর নির্ভর করছি কিন্তু এখনও গ্রেডিয়েন্ট, মাস্ক, ছদ্ম-উপাদান ইত্যাদি ব্যবহার করছি। প্রতিটির যুক্তি খুঁজে বের করা এবং একই সাথে নতুন কৌশল শেখার জন্য এটি একটি ভাল অনুশীলন হতে পারে। এটি বলেছে, আপনার যদি তাদের সম্পর্কে কোন প্রশ্ন থাকে তবে মন্তব্য বিভাগটি নীচে রয়েছে।

মোড়ক উম্মচন

দেখুন, সিএসএসে আমরা অনেক কিছুই করতে পারি না শুধুমাত্র একটি ডিভ, কয়েকটি গ্রেডিয়েন্ট, সিউডো-এলিমেন্ট, ভেরিয়েবল ছাড়া। দেখে মনে হচ্ছে আমরা বিভিন্ন স্পিনিং লোডারগুলির একটি সম্পূর্ণ গুচ্ছ তৈরি করেছি, তবে সেগুলি মূলত সামান্য পরিবর্তনের সাথে একই জিনিস।

এই মাত্র শুরু. এই সিরিজে, আমরা CSS লোডার তৈরির জন্য আরও ধারণা এবং উন্নত ধারণাগুলি দেখব।

---

একক উপাদান লোডার: স্পিনার মূলত প্রকাশিত সিএসএস-ট্রিকস। তোমার উচিত নিউজলেটার পান.

• Coinsmart. ইউরোপের সেরা বিটকয়েন এবং ক্রিপ্টো এক্সচেঞ্জ।
• প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. বিনামূল্যে এক্সেস.
• ক্রিপ্টোহক। Altcoin রাডার। বিনামূল্যে ট্রায়াল.
• সূত্র: https://css-tricks.com/single-element-loaders-the-spinner/