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

আমরা এই সিরিজে লোডার খুঁজছি. এর থেকেও বেশি, আমরা কিছু সাধারণ লোডার প্যাটার্ন ভেঙে ফেলছি এবং কীভাবে সেগুলিকে একটি একক ডিভ ছাড়া আর কিছুই না দিয়ে পুনরায় তৈরি করা যায়। এখন পর্যন্ত, আমরা আলাদা বাছাই করেছি ক্লাসিক স্পিনিং লোডার. এখন, আসুন অন্য একটির দিকে তাকান যার সম্পর্কে আপনি সম্ভবত ভাল জানেন: বিন্দু

ডট লোডার সব জায়গা জুড়ে আছে. এগুলি ঝরঝরে কারণ এগুলি সাধারণত তিনটি বিন্দু নিয়ে গঠিত যা একটি পাঠ্য উপবৃত্ত (...) এর মতো দেখতে যা চারপাশে নাচছে।

এখানে আমাদের লক্ষ্য হল একটি একক ডিভ উপাদান থেকে এই একই জিনিস তৈরি করা। অন্য কথায়, প্রতিটি বিন্দুর জন্য কোনো একটি ডিভ বা পৃথক অ্যানিমেশন নেই।

উপরের একটি লোডারের উদাহরণটি একটি একক ডিভ উপাদান, কয়েকটি সিএসএস ঘোষণা এবং কোনও ছদ্ম-উপাদান দিয়ে তৈরি করা হয়েছে। আমি 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%; }
}

আমি এই বেশ সোজা দেখায় আশা করি. আমরা কি পেয়েছি একটি 180px-wide .loader যে উপাদান দুটি কনিক গ্রেডিয়েন্ট দেখায় যেটি হার্ড কালার স্পোর্টিং দুটি রঙের মধ্যে স্টপ হয়ে যায় — প্রথম গ্রেডিয়েন্টটি উপরের অর্ধেক বরাবর লাল এবং নীল .loader, এবং দ্বিতীয় গ্রেডিয়েন্টটি নীচের অর্ধেক বরাবর সবুজ এবং বেগুনি।

যেভাবে লোডারের ব্যাকগ্রাউন্ডের আকার হয় (200% চওড়া), আমরা একবারে প্রতিটি অর্ধেকের মধ্যে শুধুমাত্র একটি রং দেখতে পাই। তারপরে আমাদের কাছে এই ছোট্ট অ্যানিমেশনটি রয়েছে যা সেই ব্যাকগ্রাউন্ড গ্রেডিয়েন্টগুলির অবস্থানকে বাম, ডানে এবং পিছনে আবার চিরতরে এবং চিরতরে পুশ করে।

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

অ্যানিমেশনে লক্ষ্য করুন যে প্রথম স্তরটি Y=0% (শীর্ষে স্থাপন করা) while X থেকে পরিবর্তন হয় 0% থেকে 100%. দ্বিতীয় স্তর জন্য, আমরা জন্য একই আছে X কিন্তু Y=100% (নীচে রাখা)।

কেন একটি ব্যবহার করে 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 */
}

সেখানে কিছু সদৃশ কোড আছে, তাই আসুন একটি সিএসএস ভেরিয়েবল তৈরি করি যাতে জিনিসগুলি কম হয়:

.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% বিন্দু নাচ করতে.

আমরা যা পাই তা এখানে:

এখন, এটিকে আমাদের গ্রেডিয়েন্ট অ্যানিমেশনের সাথে একত্রিত করুন এবং যাদুটি ঘটতে শুরু করে:

ডট লোডার বৈচিত্র

আমরা শেষ উদাহরণে যে CSS ভেরিয়েবলটি তৈরি করেছি তা নতুন রঙে অদলবদল করা এবং একই লোডারের আরও বৈচিত্র তৈরি করাকে আরও সহজ করে তোলে। উদাহরণস্বরূপ, বিভিন্ন রং এবং আকার:

আমাদের বিন্দু জন্য অন্য আন্দোলন সম্পর্কে কি?

এখানে, আমি যা করেছি তা হল বিভিন্ন অবস্থান বিবেচনা করার জন্য অ্যানিমেশন আপডেট করা, এবং আমরা একই কোড কাঠামো সহ আরেকটি লোডার পাই!

মাস্ক স্তরগুলির জন্য আমি যে অ্যানিমেশন কৌশলটি ব্যবহার করেছি তা একক রঙের সাথে অনেকগুলি ভিন্ন লোডার তৈরি করতে ব্যাকগ্রাউন্ড স্তরগুলির সাথেও ব্যবহার করা যেতে পারে। আমি এই সম্পর্কে একটি বিস্তারিত নিবন্ধ লিখেছিলাম. আপনি দেখতে পাবেন যে একই কোড কাঠামো থেকে আমরা কয়েকটি মান পরিবর্তন করে ভিন্ন ভিন্নতা তৈরি করতে পারি। আমি নিবন্ধের শেষে কয়েকটি উদাহরণ শেয়ার করছি।

কেন একটি বিন্দু সঙ্গে একটি লোডার না?

আমি একই কৌশল ব্যবহার করছি কিন্তু একটি আরো সহজ যুক্তি সহ এটি একটি মোটামুটি সহজ হওয়া উচিত:

এখানে লোডারের আরেকটি উদাহরণ যেখানে আমি অ্যানিমেটিং করছি radial-gradient সংযুক্ত CSS ফিল্টার এবং mix-blend-mode একটি ব্লবি প্রভাব তৈরি করতে:

আপনি যদি কোড চেক করেন, আপনি দেখতে পাবেন যে আমি সত্যিই সেখানে যা করছি তা হল অ্যানিমেটিং background-position, ঠিক যেমন আমরা পূর্ববর্তী লোডারের সাথে করেছি, কিন্তু একটি ড্যাশ যোগ করছি background-size বিন্দু শোষণ করার সাথে সাথে ব্লবটি বড় হওয়ার মতো দেখায়।

আপনি যদি সেই ব্লব প্রভাবের পিছনে যাদু বুঝতে চান তবে আপনি উল্লেখ করতে পারেন এই ইন্টারেক্টিভ স্লাইড (শুধুমাত্র ক্রোম) দ্বারা আনা টিউডার কারণ সে এত ভালো বিষয় কভার করে!

এখানে আরেকটি ডট লোডার ধারণা, এবার একটি ভিন্ন কৌশল ব্যবহার করে:

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

ওহ, এবং নোট করুন কিভাবে এই ডেমো CSS গ্রিড ব্যবহার করে। এটি আমাদের গ্রিডের ডিফল্ট লিভারেজ করতে দেয় stretch প্রান্তিককরণ যাতে উভয় ছদ্ম-উপাদান তাদের পিতামাতার সমগ্র এলাকাকে কভার করে। সাইজ করার কোন প্রয়োজন নেই! সঙ্গে একটু চারপাশে ধাক্কা translate() এবং আমরা সব প্রস্তুত.

আরো উদাহরণ!

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

পরবর্তী…

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

---

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

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