CSS লোডার জেনারেটর

CSS লোডার জেনারেটর কী?

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

CSS লোডার জেনারেটর কীভাবে ব্যবহার করবেন

1. একটি লোডার শৈলী বেছে নিন: স্পিনার, রিং, ডট, বার বা পালস।
2. পিক্সেলে আকার সেট করুন এবং সোয়াচ দিয়ে বা মান টাইপ করে একটি রং বেছে নিন।
3. একটি পূর্ণ চক্রের জন্য অ্যানিমেশন গতি সেকেন্ডে সেট করুন।
4. স্ট্রোকের পুরুত্ব (স্পিনার ও রিং) বা ডট বা বারের সংখ্যা সমন্বয় করতে সেটিংস খুলুন।
5. লাইভ প্রিভিউ অ্যানিমেট হতে দেখুন, তারপর কপি বোতাম দিয়ে তৈরি HTML ও CSS কপি করুন।

উদাহরণ

শৈলী: স্পিনার, আকার 48px, রং #4f86f7, গতি 1s, পুরুত্ব 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

শৈলী: ডট, আকার 48px, রং #9333ea, গতি 1s, সংখ্যা 3

<div class="dd-loader"><div></div><div></div><div></div></div> প্রতিটি ডটে ধাপে ধাপে animation-delay দিয়ে যাতে ডটগুলো ঢেউয়ের মতো বড়-ছোট হয়।

সচরাচর জিজ্ঞাসিত প্রশ্ন

কোন কোন লোডার শৈলী উপলব্ধ?

পাঁচটি: স্পিনার (ঘূর্ণায়মান একটি চাপ), রিং (একটি মোটা ঘূর্ণায়মান বলয়), ডট (ঢেউয়ের মতো বড়-ছোট হওয়া বিন্দু), বার (উপরে-নিচে প্রসারিত হওয়া দণ্ড), এবং পালস (একটি একক স্পন্দিত বৃত্ত)। শৈলী মেনু দিয়ে পরিবর্তন করুন এবং প্রিভিউ ও কোড সঙ্গে সঙ্গে আপডেট হয়।

আকার, রং ও গতি নিয়ন্ত্রণগুলো কী করে?

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

তৈরি হওয়া CSS কি JavaScript ছাড়া বিশুদ্ধ CSS?

হ্যাঁ। স্নিপেটটি সাধারণ HTML সঙ্গে একটি <style> ব্লক যা CSS অ্যানিমেশন ও @keyframes ব্যবহার করে, তাই এটি কোনো JavaScript বা বাহ্যিক লাইব্রেরি ছাড়াই চলে। এটি আপনার পেজে পেস্ট করুন এবং এটি নিজে থেকেই কাজ করে।

পুরুত্ব ও সংখ্যা কেন প্রতিটি শৈলী বদলায় না?

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

কিছু কি কোনো সার্ভারে আপলোড হয়?

না। লোডার ও এর CSS সম্পূর্ণরূপে আপনার ব্রাউজারে স্থানীয় স্ট্রিং গণনার মাধ্যমে তৈরি হয় - কোনো সেটিং, রং বা কোড কখনও কোনো সার্ভারে পাঠানো হয় না, তাই এটি অফলাইনে কাজ করে এবং আপনার কাজ গোপন রাখে।