একটি লোডিং বার উপাদান নির্মাণ

কিভাবে <progress> উপাদানের সাথে একটি রঙ অভিযোজিত এবং অ্যাক্সেসযোগ্য লোডিং বার তৈরি করা যায় তার একটি ভিত্তিগত ওভারভিউ।

অ্যাডাম আর্গিল

এই পোস্টে আমি <progress> উপাদানের সাথে একটি রঙ অভিযোজিত এবং অ্যাক্সেসযোগ্য লোডিং বার কীভাবে তৈরি করা যায় সে সম্পর্কে চিন্তাভাবনা ভাগ করতে চাই। ডেমো চেষ্টা করুন এবং উৎস দেখুন !

আলো এবং অন্ধকার, অনিশ্চিত, ক্রমবর্ধমান, এবং সমাপ্তি Chrome এ দেখানো হয়েছে।

আপনি যদি ভিডিও পছন্দ করেন তবে এখানে এই পোস্টটির একটি YouTube সংস্করণ রয়েছে:

ওভারভিউ

<progress> উপাদানটি সম্পূর্ণ হওয়ার বিষয়ে ব্যবহারকারীদের ভিজ্যুয়াল এবং শ্রবণযোগ্য প্রতিক্রিয়া প্রদান করে। এই ভিজ্যুয়াল ফিডব্যাকটি এমন পরিস্থিতিতে মূল্যবান যেমন: একটি ফর্মের মাধ্যমে অগ্রগতি, তথ্য ডাউনলোড বা আপলোড করা বা এমনকি দেখানো যে অগ্রগতির পরিমাণ অজানা কিন্তু কাজ এখনও সক্রিয়।

এই GUI চ্যালেঞ্জটি বিদ্যমান HTML <progress> উপাদানের সাথে কাজ করেছে যাতে অ্যাক্সেসযোগ্যতার কিছু প্রচেষ্টা বাঁচানো যায়। রঙ এবং লেআউটগুলি অন্তর্নির্মিত উপাদানটির জন্য কাস্টমাইজেশনের সীমাকে ঠেলে দেয়, উপাদানটিকে আধুনিকীকরণ করতে এবং এটি ডিজাইন সিস্টেমের মধ্যে আরও ভালভাবে ফিট করে।

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

মার্কআপ

আমি একটি <label> এ <progress> উপাদানটি মোড়ানো বেছে নিয়েছি যাতে আমি একটি অন্তর্নিহিত সম্পর্কের পক্ষে স্পষ্ট সম্পর্ক বৈশিষ্ট্যগুলি এড়িয়ে যেতে পারি। আমি লোডিং অবস্থার দ্বারা প্রভাবিত একটি অভিভাবক উপাদানকেও লেবেল করেছি, তাই স্ক্রিন রিডার প্রযুক্তিগুলি সেই তথ্যটি ব্যবহারকারীর কাছে ফেরত দিতে পারে৷

<progress></progress>

যদি কোন value না থাকে, তাহলে উপাদানটির অগ্রগতি অনিশ্চিত । max অ্যাট্রিবিউট ডিফল্ট 1, তাই অগ্রগতি 0 এবং 1-এর মধ্যে। উদাহরণস্বরূপ, max 100-এ সেট করা হলে, পরিসরটি 0-100-এ সেট করা হবে। আমি 0 এবং 1 সীমার মধ্যে থাকতে বেছে নিয়েছি, অগ্রগতির মানগুলিকে 0.5 বা 50% এ অনুবাদ করেছি।

লেবেল-মোড়ানো অগ্রগতি

একটি অন্তর্নিহিত সম্পর্কে, একটি অগ্রগতি উপাদান এই মত একটি লেবেল দ্বারা মোড়ানো হয়:

<label>Loading progress<progress></progress></label>

আমার ডেমোতে আমি শুধুমাত্র স্ক্রীন রিডারদের জন্য লেবেল অন্তর্ভুক্ত করতে বেছে নিয়েছি। এটি একটি <span> এ লেবেল পাঠ্যটি মোড়ানো এবং এতে কিছু শৈলী প্রয়োগ করে করা হয় যাতে এটি কার্যকরভাবে পর্দার বাইরে থাকে:

<label>
  <span class="sr-only">Loading progress</span>
  <progress></progress>
</label>

WebAIM থেকে নিম্নলিখিত সহগামী CSS সহ:

.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

ডেভটুলগুলির স্ক্রিনশট শুধুমাত্র স্ক্রীন রেডি এলিমেন্ট প্রকাশ করে।

লোডিং অগ্রগতি দ্বারা প্রভাবিত এলাকা

আপনার যদি সুস্থ দৃষ্টি থাকে, তাহলে সম্পর্কিত উপাদান এবং পৃষ্ঠার ক্ষেত্রগুলির সাথে একটি অগ্রগতি সূচক যুক্ত করা সহজ হতে পারে, কিন্তু দৃষ্টি প্রতিবন্ধী ব্যবহারকারীদের জন্য, এটি এতটা পরিষ্কার নয়। লোডিং সম্পূর্ণ হলে পরিবর্তিত হবে এমন শীর্ষ-সবথেকে এলিমেন্টে aria-busy অ্যাট্রিবিউট বরাদ্দ করে এটিকে উন্নত করুন। অধিকন্তু, aria-describedby দ্বারা অগ্রগতি এবং লোডিং জোনের মধ্যে একটি সম্পর্ক নির্দেশ করুন।

<main id="loading-zone" aria-busy="true">
  …
  <progress aria-describedby="loading-zone"></progress>
</main>

জাভাস্ক্রিপ্ট থেকে, টাস্কের শুরুতে aria-busy true এ এবং শেষ হলে false এ টগল করুন।

আরিয়া অ্যাট্রিবিউট সংযোজন

যদিও একটি <progress> উপাদানের অন্তর্নিহিত ভূমিকা হল progressbar , আমি এটিকে এমন ব্রাউজারগুলির জন্য স্পষ্ট করে দিয়েছি যেগুলির অন্তর্নিহিত ভূমিকা নেই। আমি স্পষ্টভাবে উপাদানটিকে অজানা অবস্থায় রাখার জন্য indeterminate বৈশিষ্ট্য যুক্ত করেছি, যা উপাদানটির কোনো value সেট নেই তা পর্যবেক্ষণ করার চেয়ে পরিষ্কার।

<label>
  Loading 
  <progress 
    indeterminate 
    role="progressbar" 
    aria-describedby="loading-zone"
    tabindex="-1"
  >unknown</progress>
</label>

জাভাস্ক্রিপ্ট থেকে অগ্রগতি উপাদান ফোকাসযোগ্য করতে tabindex="-1" ব্যবহার করুন। এটি স্ক্রিন রিডার প্রযুক্তির জন্য গুরুত্বপূর্ণ, যেহেতু অগ্রগতির পরিবর্তন হিসাবে অগ্রগতি ফোকাস দেওয়া, ব্যবহারকারীর কাছে ঘোষণা করবে যে আপডেট করা অগ্রগতি কতদূর পৌঁছেছে।

শৈলী

স্টাইলিংয়ের ক্ষেত্রে অগ্রগতির উপাদানটি কিছুটা জটিল। অন্তর্নির্মিত HTML উপাদানগুলির বিশেষ লুকানো অংশ রয়েছে যা নির্বাচন করা কঠিন হতে পারে এবং প্রায়শই কেবলমাত্র সীমিত বৈশিষ্ট্য সেট করার প্রস্তাব দেয়।

লেআউট

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

<progress> লেআউট

অগ্রগতি উপাদানটির প্রস্থকে স্পর্শ করা হয়নি তাই এটি নকশায় প্রয়োজনীয় স্থানের সাথে সঙ্কুচিত এবং বৃদ্ধি পেতে পারে। অন্তর্নির্মিত শৈলীগুলি appearance এবং border সেট none দ্বারা ছিনিয়ে নেওয়া হয়। এটি করা হয় যাতে উপাদানটি ব্রাউজার জুড়ে স্বাভাবিক করা যায়, যেহেতু প্রতিটি ব্রাউজার তাদের উপাদানের জন্য নিজস্ব শৈলী রয়েছে।

progress {
  --_track-size: min(10px, 1ex);
  --_radius: 1e3px;

  /*  reset  */
  appearance: none;
  border: none;

  position: relative;
  height: var(--_track-size);
  border-radius: var(--_radius);
  overflow: hidden;
}

_radius জন্য 1e3px এর মান একটি বড় সংখ্যা প্রকাশ করতে বৈজ্ঞানিক সংখ্যার স্বরলিপি ব্যবহার করে যাতে border-radius সর্বদা বৃত্তাকার হয়। এটি 1000px এর সমতুল্য। আমি এটি ব্যবহার করতে পছন্দ করি কারণ আমার লক্ষ্য হল এমন একটি মান ব্যবহার করা যাতে আমি এটি সেট করতে পারি এবং ভুলে যেতে পারি (এবং এটি 1000px এর চেয়ে ছোট)। প্রয়োজনে এটিকে আরও বড় করাও সহজ: শুধুমাত্র 3 কে 4 এ পরিবর্তন করুন, তাহলে 1e4px 10000px এর সমতুল্য।

overflow: hidden ব্যবহার করা হয় এবং একটি বিতর্কিত শৈলী হয়েছে। এটি কয়েকটি জিনিসকে সহজ করেছে, যেমন ট্র্যাকে border-radius মানগুলি পাস করার প্রয়োজন নেই এবং ট্র্যাক ফিল উপাদানগুলি; কিন্তু এর মানে হল যে কোন অগ্রগতির সন্তান উপাদানের বাইরে থাকতে পারবে না। এই কাস্টম অগ্রগতি উপাদানটির উপর আরেকটি পুনরাবৃত্তি overflow: hidden এবং এটি অ্যানিমেশন বা আরও ভাল সমাপ্তির অবস্থার জন্য কিছু সুযোগ খুলতে পারে।

অগ্রগতি সম্পূর্ণ

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

progress:not([max])[value="1"]::before,
progress[max="100"][value="100"]::before {
  content: "✓";
  
  position: absolute;
  inset-block: 0;
  inset-inline: auto 0;
  display: flex;
  align-items: center;
  padding-inline-end: max(calc(var(--_track-size) / 4), 3px);

  color: white;
  font-size: calc(var(--_track-size) / 1.25);
}

100% লোডিং বারের স্ক্রিনশট এবং শেষে একটি চেকমার্ক দেখাচ্ছে।

রঙ

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

হালকা এবং গাঢ় ব্রাউজার শৈলী

আপনার সাইটটিকে একটি অন্ধকার এবং হালকা অভিযোজিত <progress> উপাদানে বেছে নিতে, color-scheme যা প্রয়োজন।

progress {
  color-scheme: light dark;
}

একক সম্পত্তি অগ্রগতি ভরা রঙ

একটি <progress> এলিমেন্ট টিন্ট করতে, accent-color ব্যবহার করুন। 

progress {
  accent-color: rebeccapurple;
}

accent-color উপর নির্ভর করে ট্র্যাকের পটভূমির রঙ হালকা থেকে অন্ধকারে পরিবর্তিত হয় তা লক্ষ্য করুন। ব্রাউজারটি সঠিক বৈসাদৃশ্য নিশ্চিত করছে: বেশ ঝরঝরে।

সম্পূর্ণ কাস্টম হালকা এবং গাঢ় রং

<progress> উপাদানে দুটি কাস্টম বৈশিষ্ট্য সেট করুন, একটি ট্র্যাকের রঙের জন্য এবং অন্যটি ট্র্যাকের অগ্রগতির রঙের জন্য। prefers-color-scheme মিডিয়া কোয়েরির ভিতরে, ট্র্যাক এবং ট্র্যাক অগ্রগতির জন্য নতুন রঙের মান প্রদান করুন। 

progress {
  --_track: hsl(228 100% 90%);
  --_progress: hsl(228 100% 50%);
}

@media (prefers-color-scheme: dark) {
  progress {
    --_track: hsl(228 20% 30%);
    --_progress: hsl(228 100% 75%);
  }
}

ফোকাস শৈলী

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

progress:focus-visible {
  outline-color: var(--_progress);
  outline-offset: 5px;
}

চারপাশে ফোকাস রিং সহ লোডিং বারের স্ক্রিনশট। সব রং মিলে যায়।

ব্রাউজার জুড়ে কাস্টম শৈলী

প্রতিটি ব্রাউজার প্রকাশ করে এমন একটি <progress> উপাদানের অংশগুলি নির্বাচন করে শৈলীগুলি কাস্টমাইজ করুন। অগ্রগতি উপাদান ব্যবহার করা একটি একক ট্যাগ, তবে এটি কয়েকটি শিশু উপাদান দিয়ে তৈরি যা CSS ছদ্ম নির্বাচকদের মাধ্যমে প্রকাশ করা হয়। আপনি সেটিং সক্ষম করলে Chrome DevTools আপনাকে এই উপাদানগুলি দেখাবে:

  1. আপনার পৃষ্ঠায় ডান-ক্লিক করুন এবং DevTools আনতে উপাদান পরিদর্শন নির্বাচন করুন।
  2. DevTools উইন্ডোর উপরের-ডান কোণে সেটিংস গিয়ারে ক্লিক করুন।
  3. এলিমেন্ট শিরোনামের অধীনে, ব্যবহারকারী এজেন্ট শ্যাডো DOM চেকবক্স খুঁজুন এবং সক্ষম করুন।

ব্যবহারকারী এজেন্ট শ্যাডো DOM প্রকাশ করতে DevTools-এ কোথায় তার স্ক্রিনশট।

সাফারি এবং ক্রোমিয়াম শৈলী

ওয়েবকিট-ভিত্তিক ব্রাউজার যেমন Safari এবং Chromium প্রকাশ করে ::-webkit-progress-bar এবং ::-webkit-progress-value , যা CSS-এর একটি উপসেট ব্যবহার করার অনুমতি দেয়। আপাতত, আগে তৈরি করা কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করে background-color সেট করুন, যা আলো এবং অন্ধকারের সাথে খাপ খায়। 

/*  Safari/Chromium  */
progress[value]::-webkit-progress-bar {
  background-color: var(--_track);
}

progress[value]::-webkit-progress-value {
  background-color: var(--_progress);
}

স্ক্রিনশট অগ্রগতি উপাদানের ভিতরের উপাদানগুলি দেখাচ্ছে৷

ফায়ারফক্স শৈলী

ফায়ারফক্স শুধুমাত্র <progress> উপাদানে ::-moz-progress-bar ছদ্ম নির্বাচককে প্রকাশ করে। এর মানে আমরা সরাসরি ট্র্যাক টিন্ট করতে পারি না। 

/*  Firefox  */
progress[value]::-moz-progress-bar {
  background-color: var(--_progress);
}

ফায়ারফক্সের স্ক্রিনশট এবং অগ্রগতি উপাদানের অংশগুলি কোথায় খুঁজে পাবেন।

ডিবাগিং কর্নারের স্ক্রিনশট যেখানে Safari, iOS Safari, অ্যান্ড্রয়েডে ফায়ারফক্স, ক্রোম এবং ক্রোম সবকটিতেই লোডিং বার কাজ করে দেখানো হয়েছে।

লক্ষ্য করুন যে ফায়ারফক্সে accent-color থেকে একটি ট্র্যাক রঙ সেট করা হয়েছে যখন iOS সাফারির একটি হালকা নীল ট্র্যাক রয়েছে। এটি ডার্ক মোডে একই রকম: ফায়ারফক্সের একটি গাঢ় ট্র্যাক রয়েছে কিন্তু আমাদের সেট করা কাস্টম রঙ নয় এবং এটি ওয়েবকিট-ভিত্তিক ব্রাউজারে কাজ করে।

অ্যানিমেশন

ব্রাউজার বিল্ট-ইন ছদ্ম নির্বাচকদের সাথে কাজ করার সময়, এটি প্রায়শই অনুমোদিত CSS বৈশিষ্ট্যের সীমিত সেটের সাথে থাকে।

ট্র্যাক ফিলিং আপ অ্যানিমেটিং

অগ্রগতি উপাদানের inline-size একটি পরিবর্তন যোগ করা Chromium-এর জন্য কাজ করে কিন্তু Safari-এর জন্য নয়। ফায়ারফক্স এটির ::-moz-progress-bar একটি ট্রানজিশন প্রপার্টি ব্যবহার করে না। 

/*  Chromium Only 😢  */
progress[value]::-webkit-progress-value {
  background-color: var(--_progress);
  transition: inline-size .25s ease-out;
}

অ্যানিমেটিং :indeterminate অবস্থা

এখানে আমি একটু বেশি সৃজনশীল হয়েছি যাতে আমি একটি অ্যানিমেশন দিতে পারি। Chromium-এর জন্য একটি ছদ্ম-উপাদান তৈরি করা হয় এবং একটি গ্রেডিয়েন্ট প্রয়োগ করা হয় যা তিনটি ব্রাউজারের জন্য সামনে এবং পিছনে অ্যানিমেটেড।

কাস্টম বৈশিষ্ট্য

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

progress {
  --_indeterminate-track: linear-gradient(to right,
    var(--_track) 45%,
    var(--_progress) 0%,
    var(--_progress) 55%,
    var(--_track) 0%
  );
  --_indeterminate-track-size: 225% 100%;
  --_indeterminate-track-animation: progress-loading 2s infinite ease;
}

কাস্টম বৈশিষ্ট্যগুলি কোডটিকে শুষ্ক থাকতে সাহায্য করবে কারণ আবারও, আমরা এই ব্রাউজার-নির্দিষ্ট নির্বাচকদের একসাথে গোষ্ঠীবদ্ধ করতে পারি না।

কীফ্রেমগুলি

লক্ষ্য হল একটি অসীম অ্যানিমেশন যা সামনে পিছনে যায়। শুরু এবং শেষ কীফ্রেমগুলি CSS-এ সেট করা হবে। একটি অ্যানিমেশন তৈরি করতে শুধুমাত্র একটি কীফ্রেম প্রয়োজন, মধ্যবর্তী কীফ্রেমটি 50% , যেখান থেকে শুরু হয়েছে সেখানে ফিরে আসে, বারবার! 

@keyframes progress-loading {
  50% {
    background-position: left; 
  }
}

প্রতিটি ব্রাউজার টার্গেটিং

প্রতিটি ব্রাউজারই <progress> উপাদানে ছদ্ম-উপাদান তৈরির অনুমতি দেয় না বা অগ্রগতি বারকে অ্যানিমেট করার অনুমতি দেয় না। ছদ্ম-উপাদানের চেয়ে বেশি ব্রাউজার ট্র্যাক অ্যানিমেটিং সমর্থন করে, তাই আমি ছদ্ম-উপাদানগুলি থেকে বেস হিসাবে এবং অ্যানিমেটিং বারগুলিতে আপগ্রেড করি৷

ক্রোমিয়াম সিউডো-উপাদান

ক্রোমিয়াম ছদ্ম-উপাদানকে অনুমতি দেয়: ::after । অনির্দিষ্ট কাস্টম বৈশিষ্ট্য ব্যবহার করা হয়, এবং সামনে এবং পিছনে অ্যানিমেশন খুব ভাল কাজ করে। 

progress:indeterminate::after {
  content: "";
  inset: 0;
  position: absolute;
  background: var(--_indeterminate-track);
  background-size: var(--_indeterminate-track-size);
  background-position: right; 
  animation: var(--_indeterminate-track-animation);
}
সাফারি অগ্রগতি বার

সাফারির জন্য, কাস্টম বৈশিষ্ট্য এবং একটি অ্যানিমেশন ছদ্ম-উপাদান অগ্রগতি বারে প্রয়োগ করা হয়: 

progress:indeterminate::-webkit-progress-bar {
  background: var(--_indeterminate-track);
  background-size: var(--_indeterminate-track-size);
  background-position: right; 
  animation: var(--_indeterminate-track-animation);
}
ফায়ারফক্সের অগ্রগতি বার

ফায়ারফক্সের জন্য, কাস্টম বৈশিষ্ট্য এবং একটি অ্যানিমেশন ছদ্ম-উপাদান অগ্রগতি বারেও প্রয়োগ করা হয়: 

progress:indeterminate::-moz-progress-bar {
  background: var(--_indeterminate-track);
  background-size: var(--_indeterminate-track-size);
  background-position: right; 
  animation: var(--_indeterminate-track-animation);
}

জাভাস্ক্রিপ্ট

জাভাস্ক্রিপ্ট <progress> উপাদানের সাথে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। এটি উপাদানটিতে পাঠানো মান নিয়ন্ত্রণ করে এবং স্ক্রিন রিডারদের জন্য নথিতে যথেষ্ট তথ্য উপস্থিত রয়েছে তা নিশ্চিত করে। 

const state = {
  val: null
}

ডেমো অগ্রগতি নিয়ন্ত্রণ করার জন্য বোতাম অফার করে; তারা state.val আপডেট করে এবং তারপর DOM আপডেট করার জন্য একটি ফাংশন কল করে। 

document.querySelector('#complete').addEventListener('click', e => {
  state.val = 1
  setProgress()
})

setProgress()

এই ফাংশনটি যেখানে UI/UX অর্কেস্ট্রেশন ঘটে। একটি setProgress() ফাংশন তৈরি করে শুরু করুন। কোনো প্যারামিটারের প্রয়োজন নেই কারণ এতে state অবজেক্ট, অগ্রগতি উপাদান এবং <main> জোনে অ্যাক্সেস রয়েছে। 

const setProgress = () => {
  
}

<main> জোনে লোডিং অবস্থা সেট করা হচ্ছে

অগ্রগতি সম্পূর্ণ হয়েছে কি না তার উপর নির্ভর করে, সম্পর্কিত <main> উপাদানটির aria-busy অ্যাট্রিবিউটে একটি আপডেট প্রয়োজন: 

const setProgress = () => {
  zone.setAttribute('aria-busy', state.val < 1)
}

লোডিং পরিমাণ অজানা থাকলে বৈশিষ্ট্যগুলি সাফ করুন

মানটি অজানা বা সেট না থাকলে, এই ব্যবহারে null , value এবং aria-valuenow বৈশিষ্ট্যগুলি সরান। এটি <progress> প্রগতি>কে অনিশ্চিত করে তুলবে। 

const setProgress = () => {
  zone.setAttribute('aria-busy', state.val < 1)

  if (state.val === null) {
    progress.removeAttribute('aria-valuenow')
    progress.removeAttribute('value')
    progress.focus()
    return
  }
}

জাভাস্ক্রিপ্ট দশমিক গণিত সমস্যা ঠিক করুন

যেহেতু আমি অগ্রগতি ডিফল্ট সর্বোচ্চ 1 এর সাথে লেগে থাকতে বেছে নিয়েছি, তাই ডেমো বৃদ্ধি এবং হ্রাস ফাংশন দশমিক গণিত ব্যবহার করে। জাভাস্ক্রিপ্ট এবং অন্যান্য ভাষাগুলি সর্বদা দুর্দান্ত নয় । এখানে একটি roundDecimals() ফাংশন যা গণিত ফলাফলের অতিরিক্ত ছাঁটাই করবে: 

const roundDecimals = (val, places) =>
  +(Math.round(val + "e+" + places)  + "e-" + places)

মানটিকে বৃত্তাকার করুন যাতে এটি উপস্থাপন করা যায় এবং পাঠযোগ্য হয়: 

const setProgress = () => {
  zone.setAttribute('aria-busy', state.val < 1)

  if (state.val === null) {
    progress.removeAttribute('aria-valuenow')
    progress.removeAttribute('value')
    progress.focus()
    return
  }

  const val = roundDecimals(state.val, 2)
  const valPercent = val * 100 + "%"
}

স্ক্রীন রিডার এবং ব্রাউজারের অবস্থার জন্য মান সেট করুন

মানটি DOM-এর তিনটি স্থানে ব্যবহৃত হয়:

  1. <progress> উপাদানের value বৈশিষ্ট্য।
  2. aria-valuenow বৈশিষ্ট্য।
  3. <progress> ভিতরের পাঠ্য বিষয়বস্তু। 
const setProgress = () => {
  zone.setAttribute('aria-busy', state.val < 1)

  if (state.val === null) {
    progress.removeAttribute('aria-valuenow')
    progress.removeAttribute('value')
    progress.focus()
    return
  }

  const val = roundDecimals(state.val, 2)
  const valPercent = val * 100 + "%"

  progress.value = val
  progress.setAttribute('aria-valuenow', valPercent)
  progress.innerText = valPercent
}

অগ্রগতি ফোকাস প্রদান

মানগুলি আপডেট করার সাথে, দর্শনীয় ব্যবহারকারীরা অগ্রগতি পরিবর্তন দেখতে পাবে, তবে স্ক্রিন রিডার ব্যবহারকারীদের এখনও পরিবর্তনের ঘোষণা দেওয়া হয়নি। <progress> উপাদানে ফোকাস করুন এবং ব্রাউজার আপডেট ঘোষণা করবে! 

const setProgress = () => {
  zone.setAttribute('aria-busy', state.val < 1)

  if (state.val === null) {
    progress.removeAttribute('aria-valuenow')
    progress.removeAttribute('value')
    progress.focus()
    return
  }

  const val = roundDecimals(state.val, 2)
  const valPercent = val * 100 + "%"

  progress.value = val
  progress.setAttribute('aria-valuenow', valPercent)
  progress.innerText = valPercent

  progress.focus()
}

Mac OS ভয়েস ওভার অ্যাপের স্ক্রিনশট ব্যবহারকারীর কাছে লোডিং বারের অগ্রগতি পড়া।

উপসংহার

এখন যেহেতু আপনি জানেন যে আমি কীভাবে এটি করেছি, আপনি কেমন হবে‽ 🙂৷

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

আসুন আমাদের পদ্ধতির বৈচিত্র্য আনুন এবং ওয়েবে তৈরি করার সমস্ত উপায় শিখি।

একটি ডেমো তৈরি করুন, আমাকে লিঙ্কগুলি টুইট করুন এবং আমি নীচের সম্প্রদায়ের রিমিক্স বিভাগে এটি যুক্ত করব!

কমিউনিটি রিমিক্স