আমরা স্পিনারদের দিকে তাকিয়েছি। আমরা বিন্দু দেখেছি. এখন আমরা লোডারদের জন্য আরেকটি সাধারণ প্যাটার্ন মোকাবেলা করতে যাচ্ছি: বার. এবং আমরা সিরিজের এই তৃতীয় প্রবন্ধে একই জিনিস করতে যাচ্ছি যেমনটি আমাদের কাছে আছে শুধুমাত্র একটি উপাদান দিয়ে এবং নমনীয় CSS দিয়ে তৈরি করে যা বৈচিত্র তৈরি করা সহজ করে।
প্রবন্ধ সিরিজ
- একক উপাদান লোডার: স্পিনার
- একক উপাদান লোডার: বিন্দু
- একক উপাদান লোডার: বার - তুমি এখানে
- একক উপাদান লোডার: 3D যাচ্ছে - আসছে জুলাই 1
একটি নয়, দুটি নয়, বার লোডারের 20টি উদাহরণ দিয়ে শুরু করা যাক।
কি?! আপনি তাদের প্রতিটি এক বিস্তারিত যাচ্ছে? এটি একটি নিবন্ধের জন্য খুব বেশি!
এটা প্রথম নজরে মনে হতে পারে! কিন্তু তাদের সকলেই একই কোড স্ট্রাকচারের উপর নির্ভর করে এবং আমরা বৈচিত্র তৈরি করতে শুধুমাত্র কয়েকটি মান আপডেট করি। যে CSS এর সব ক্ষমতা. আমরা কীভাবে একটি লোডার তৈরি করতে হয় তা শিখি না, তবে আমরা বিভিন্ন কৌশল শিখি যা আমাদের শুধুমাত্র একই কোড কাঠামো ব্যবহার করে যতটা লোডার তৈরি করতে চাই।
এর কিছু বার করা যাক!
আমরা তাদের ব্যবহার করে মাত্রা নির্ধারণ করে শুরু করি width (অথবা height) সঙ্গে aspect-ratio অনুপাত বজায় রাখতে:
.bars { width: 45px; aspect-ratio: 1;
}আমরা ব্যাকগ্রাউন্ডে একটি রৈখিক গ্রেডিয়েন্ট সহ তিনটি বার বাছাই করি - এই সিরিজের পার্ট 2-এ আমরা কীভাবে ডট লোডার তৈরি করেছি তার অনুরূপ।
.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}উপরের কোডটি আমাদের নিম্নলিখিত ফলাফল দেবে:
এই সিরিজের অন্যান্য নিবন্ধের মত, আমরা অনেক মোকাবেলা করতে যাচ্ছি background চালাকি সুতরাং, আপনি যদি কখনও মনে করেন যে আমরা খুব দ্রুত ঝাঁপিয়ে পড়ছি বা আপনার আরও একটু বিস্তারিত প্রয়োজন মনে হয়, অনুগ্রহ করে সেগুলি পরীক্ষা করে দেখুন৷ আপনি আমার পড়তে পারেন স্ট্যাক ওভারফ্লো উত্তর যেখানে আমি দিই একটি বিস্তারিত ব্যাখ্যা কিভাবে এই সব কাজ করে.
বার অ্যানিমেটিং
বার লোডার তৈরি করতে আমরা হয় উপাদানটির আকার বা অবস্থান অ্যানিমেট করি। আসুন নিম্নলিখিত অ্যানিমেশন কীফ্রেমগুলি সংজ্ঞায়িত করে আকারটি অ্যানিমেট করি:
@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}দেখুন সেখানে কি হচ্ছে? 0% এবং 100% এর মধ্যে, অ্যানিমেশন পরিবর্তন করে background-size উপাদানটির পটভূমি গ্রেডিয়েন্টের। প্রতিটি কীফ্রেম তিনটি ব্যাকগ্রাউন্ড সাইজ সেট করে (প্রতিটি গ্রেডিয়েন্টের জন্য একটি)।
এবং আমরা যা পাই তা এখানে:
সাইজ বা পজিশনের জন্য বিভিন্ন অ্যানিমেশন কনফিগারেশনের সাথে খেলার মাধ্যমে আমরা যে সম্ভাব্য বৈচিত্রগুলি পেতে পারি তা কি আপনি কল্পনা করতে শুরু করতে পারেন?
এর আকার ঠিক করা যাক 20% 50% এবং এই সময় অবস্থান আপডেট করুন:
.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}
…যা আমাদের অন্য লোডার পায়!
আপনি সম্ভবত এখন পর্যন্ত কৌশল পেয়েছেন। আপনার যা দরকার তা হল একটি টাইমলাইন সংজ্ঞায়িত করা যা আপনি একটি কীফ্রেমে অনুবাদ করেন। অ্যানিমেট করে আকার, অবস্থান—বা উভয়ই! — আমাদের নখদর্পণে অসীম সংখ্যক লোডার সম্ভাবনা রয়েছে।
এবং একবার আমরা এই জাতীয় কৌশলের সাথে স্বাচ্ছন্দ্য বোধ করলে আমরা আরও এগিয়ে যেতে পারি এবং এমনকি তৈরি করতে আরও জটিল গ্রেডিয়েন্ট ব্যবহার করতে পারি অধিক লোডার
সেই ডেমোতে শেষ দুটি উদাহরণের জন্য আশা করুন, সমস্ত বার লোডার একই অন্তর্নিহিত মার্কআপ এবং শৈলী এবং অ্যানিমেশনের বিভিন্ন সমন্বয় ব্যবহার করে। কোডটি খুলুন এবং প্রতিটি ফ্রেম স্বাধীনভাবে কল্পনা করার চেষ্টা করুন; আপনি দেখতে পাবেন ডজন ডজন তৈরি করা কতটা তুচ্ছ- শত শত না হলে — বৈচিত্র্যের।
অভিনব হচ্ছে
ডট লোডারগুলির সাথে আমরা যে মাস্ক কৌশলটি করেছি তা কি আপনি মনে রেখেছেন? এই সিরিজের দ্বিতীয় নিবন্ধ? আমরা এখানে একই কাজ করতে পারেন!
উপরের সমস্ত যুক্তিগুলো যদি আমরা ভিতরে প্রয়োগ করি mask সম্পত্তি আমরা আমাদের লোডারগুলিতে একটি অভিনব রঙ যোগ করতে যেকোন ব্যাকগ্রাউন্ড কনফিগারেশন ব্যবহার করতে পারি।
আসুন একটি ডেমো নিন এবং এটি আপডেট করুন:
আমি যা করেছি সব আপডেট করা হয় background-* সঙ্গে mask-* এবং আমি একটি গ্রেডিয়েন্ট রঙ যোগ করেছি। যতটা সহজ এবং তবুও আমরা আরেকটি দুর্দান্ত লোডার পাই।
তাই বলে বিন্দু আর দণ্ডের মধ্যে কোন পার্থক্য নেই?
কোন পার্থক্য নেই! আমি যতটা সম্ভব উদাহরণ কভার করার জন্য দুটি ভিন্ন নিবন্ধ লিখেছি কিন্তু উভয় ক্ষেত্রেই, আমি একই কৌশলগুলির উপর নির্ভর করছি:
- আকার তৈরি করতে গ্রেডিয়েন্ট (বিন্দু বা বার বা অন্য কিছু)
- অ্যানিমেটিং
background-sizeএবং / অথবাbackground-positionলোডার অ্যানিমেশন তৈরি করতে - রঙের স্পর্শ যোগ করতে মুখোশ যোগ করা হচ্ছে
বার বৃত্তাকার
চলুন এবার ভিন্ন কিছু চেষ্টা করি যেখানে আমরা আমাদের বারের প্রান্তগুলিকে বৃত্তাকার করতে পারি।
একটি উপাদান এবং তার ব্যবহার ::before এবং ::after ছদ্ম, আমরা তিনটি অভিন্ন বার সংজ্ঞায়িত করি:
.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }এটি আমাদের তিনটি বার দেয়, এবার একটি রৈখিক গ্রেডিয়েন্টের উপর নির্ভর না করে:
এখন কৌশলটি হল সেই বারগুলিকে একটি সুন্দর গ্রেডিয়েন্ট দিয়ে পূরণ করা। একটি ক্রমাগত গ্রেডিয়েন্ট অনুকরণ করতে, আমাদের সাথে খেলতে হবে background বৈশিষ্ট্য উপরের চিত্রে, সবুজ এলাকা লোডার দ্বারা আচ্ছাদিত এলাকা সংজ্ঞায়িত করে। সেই ক্ষেত্রটি গ্রেডিয়েন্টের আকার হওয়া উচিত এবং, যদি আমরা গণিত করি, এটি লেবেলযুক্ত উভয় পক্ষকে গুণ করার সমান S চিত্রে, বা background-size: var(--s) var(--s).
যেহেতু আমাদের উপাদানগুলি পৃথকভাবে স্থাপন করা হয়েছে, তাই আমাদের প্রতিটির ভিতরে গ্রেডিয়েন্টের অবস্থান আপডেট করতে হবে যাতে সেগুলি ওভারল্যাপ হয়। এইভাবে, আমরা একটি ক্রমাগত গ্রেডিয়েন্ট অনুকরণ করছি যদিও এটি সত্যিই তাদের তিনটি।
প্রধান উপাদানের জন্য (কেন্দ্রে রাখা), পটভূমি কেন্দ্রে থাকা প্রয়োজন। আমরা নিম্নলিখিত ব্যবহার করি:
.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}বাম দিকে ছদ্ম-উপাদানের জন্য, আমাদের বাম দিকের পটভূমি প্রয়োজন
.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}এবং ডানদিকে সিউডোর জন্য, পটভূমিটি ডানদিকে অবস্থান করা দরকার:
.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}একই CSS ভেরিয়েবল ব্যবহার করে, --_i, যা আমরা অনুবাদের জন্য ব্যবহার করেছি, আমরা এইরকম কোড লিখতে পারি:
.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }এখন, আমাদের যা করতে হবে তা হল উচ্চতা অ্যানিমেট করা এবং কিছু বিলম্ব যোগ করা! এখানে তিনটি উদাহরণ রয়েছে যেখানে রঙ এবং আকারগুলি আলাদা:
মোড়ক উম্মচন
আমি আশা করি এখন পর্যন্ত আপনি জটিল চেহারার লোডিং অ্যানিমেশনগুলি তৈরি করার সমস্ত শক্তি দ্বারা অত্যন্ত উত্সাহিত বোধ করছেন। বার আঁকতে আমাদের শুধু একটি উপাদান প্রয়োজন, হয় গ্রেডিয়েন্ট বা সিউডো, তারপর কিছু কীফ্রেম জিনিসগুলিকে ঘুরিয়ে দেওয়ার জন্য। অশেষ সংখ্যক সম্ভাবনা পাওয়ার জন্য এটি সম্পূর্ণ রেসিপি, তাই বাইরে যান এবং কিছু ঝরঝরে জিনিস রান্না করা শুরু করুন!
পরবর্তী নিবন্ধ পর্যন্ত, আমি আপনাকে লোডারগুলির একটি মজার সংগ্রহ নিয়ে চলে যাব যেখানে আমি একত্রিত করছি বিন্দু এবং বাধা গুলি!
প্রবন্ধ সিরিজ
- একক উপাদান লোডার: স্পিনার
- একক উপাদান লোডার: বিন্দু
- একক উপাদান লোডার: বার - তুমি এখানে
- একক উপাদান লোডার: 3D যাচ্ছে - আসছে জুলাই 1
একক উপাদান লোডার: বার মূলত প্রকাশিত সিএসএস-ট্রিকস। তোমার উচিত নিউজলেটার পান.
- "
- 3d
- a
- যোগ
- সব
- অন্য
- উত্তর
- প্রয়োগ করা
- এলাকায়
- কাছাকাছি
- প্রবন্ধ
- প্রবন্ধ
- পটভূমি
- বার
- আগে
- মধ্যে
- উভয় পক্ষের
- পেতে পারি
- কোড
- সংগ্রহ
- সমন্বয়
- সাধারণ
- জটিল
- কনফিগারেশন
- বিষয়বস্তু
- নিয়ন্ত্রণ
- আবরণ
- সৃষ্টি
- নির্মিত
- লেনদেন
- বিস্তারিত
- বিশদ
- DID
- পার্থক্য
- বিভিন্ন
- মাত্রা
- প্রদর্শন
- প্রতি
- উপাদান
- ইত্যাদি
- উদাহরণ
- দ্রুত
- ব্যক্তিত্ব
- প্রথম
- ঠিক করা
- নমনীয়
- অনুসরণ
- ফ্রেম
- হাস্যকর
- অধিকতর
- পেয়ে
- চালু
- Green
- গ্রিড
- উচ্চতা
- এখানে
- আশা
- কিভাবে
- কিভাবে
- HTTPS দ্বারা
- স্বাধীনভাবে
- IT
- জুলাই
- শিখতে
- ত্যাগ
- সামান্য
- বোঝা
- বোঝাই
- তাকিয়ে
- বজায় রাখা
- করা
- তৈরি করে
- মেকিং
- মাস্ক
- গণিত
- হতে পারে
- অধিক
- পদক্ষেপ
- গুণমান
- চাহিদা
- পরবর্তী
- সংখ্যা
- খোলা
- অন্যান্য
- অংশ
- প্যাটার্ন
- খেলা
- কেলি
- দয়া করে
- অবস্থান
- স্থান
- সম্ভাবনার
- সম্ভব
- ক্ষমতা
- বৈশিষ্ট্য
- সম্পত্তি
- প্রকাশিত
- বৃত্তাকার
- একই
- ক্রম
- আকার
- অনুরূপ
- সহজ
- একক
- আয়তন
- মাপ
- So
- কিছু
- কিছু
- শূণ্যস্থান
- শুরু
- প্রযুক্তি
- সার্জারির
- জিনিস
- কিছু
- তিন
- সময়
- স্পর্শ
- রুপান্তর
- আপডেট
- আপডেট
- us
- ব্যবহার
- কি
- ছাড়া
- কাজ
