การสร้างคอมโพเนนต์ของแถบการโหลด

ภาพรวมพื้นฐานเกี่ยวกับวิธีสร้างแถบการโหลดที่ปรับสีได้และเข้าถึงได้โดยใช้องค์ประกอบ <progress>

Adam Argyle

ในโพสต์นี้ เราต้องการแชร์แนวคิดเกี่ยวกับวิธีสร้างแถบการโหลดที่ปรับสีได้และเข้าถึงได้โดยใช้องค์ประกอบ <progress> ลองใช้ตัวอย่างและดูซอร์สโค้ด

การสาธิตใน Chrome สำหรับแบบสว่างและแบบมืด แบบไม่แน่นอน แบบเพิ่มขึ้น และแบบเสร็จสมบูรณ์

หากต้องการดูวิดีโอ โปรดดูโพสต์เวอร์ชัน YouTube ที่นี่

ภาพรวม

องค์ประกอบ <progress> จะแสดงผลเป็นภาพและเสียงเพื่อแจ้งให้ผู้ใช้ทราบเกี่ยวกับการดำเนินการจนเสร็จสมบูรณ์ การแสดงผลภาพนี้มีประโยชน์ในสถานการณ์ต่างๆ เช่น ความคืบหน้าในแบบฟอร์ม การแสดงข้อมูลการดาวน์โหลดหรืออัปโหลด หรือแม้แต่การแสดงว่าไม่ทราบความคืบหน้า แต่งานยังคงดำเนินอยู่

GUI Challenge นี้ทำงานร่วมกับองค์ประกอบ HTML <progress> ที่มีอยู่เพื่อลดความพยายามในการช่วยเหลือพิเศษ สีและเลย์เอาต์ต่างๆ นี้ช่วยขยายขีดจำกัดการปรับแต่งสำหรับองค์ประกอบในตัว เพื่อทำให้คอมโพเนนต์ทันสมัยและเข้ากับระบบการออกแบบได้ดียิ่งขึ้น

แท็บแบบสว่างและแบบมืดในแต่ละเบราว์เซอร์ที่แสดงภาพรวมของไอคอนที่ปรับเปลี่ยนได้ตั้งแต่บนลงล่าง ได้แก่ Safari, Firefox และ Chrome
การสาธิตที่แสดงใน Firefox, Safari, iOS Safari, Chrome และ Android Chrome ในโทนแสงและโทนเข้ม

Markup

เราเลือกที่จะตัดองค์ประกอบ <progress> ไว้ใน <label> เพื่อให้ข้ามแอตทริบิวต์ความสัมพันธ์ที่ชัดเจนเพื่อใช้ความสัมพันธ์โดยนัย นอกจากนี้ เรายังได้ติดป้ายกำกับองค์ประกอบหลักที่ได้รับผลกระทบจากสถานะการโหลดด้วย เพื่อให้เทคโนโลยีโปรแกรมอ่านหน้าจอสามารถส่งต่อข้อมูลดังกล่าวกลับไปยังผู้ใช้

<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>

โดยมี CSS ประกอบต่อไปนี้จาก WebAIM

.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>

จาก JavaScript ให้สลับ aria-busy เป็น true เมื่อเริ่มงาน และเปลี่ยนไปเป็น false เมื่องานเสร็จ

การเพิ่มแอตทริบิวต์ ARIA

แม้ว่าบทบาทโดยนัยขององค์ประกอบ <progress> จะเป็น progressbar แต่เราได้ระบุบทบาทอย่างชัดเจนสำหรับเบราว์เซอร์ที่ไม่มีบทบาทโดยนัยดังกล่าว นอกจากนี้ เรายังได้เพิ่มแอตทริบิวต์ indeterminate เพื่อทำให้องค์ประกอบอยู่ในสถานะ "ไม่ทราบ" อย่างชัดแจ้ง ซึ่งชัดเจนกว่าการสังเกตว่าองค์ประกอบไม่มีการตั้งค่า value 

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

ใช้ tabindex="-1" เพื่อให้โฟกัสองค์ประกอบความคืบหน้าได้จาก JavaScript ซึ่งสำคัญต่อเทคโนโลยีโปรแกรมอ่านหน้าจอ เนื่องจากการให้โฟกัสที่ความคืบหน้าเมื่อความคืบหน้ามีการเปลี่ยนแปลงจะประกาศให้ผู้ใช้ทราบถึงระดับความคืบหน้าที่อัปเดต

รูปแบบ

องค์ประกอบความคืบหน้านั้นค่อนข้างยุ่งยากเมื่อพูดถึงการจัดสไตล์ องค์ประกอบ 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;
}

ค่า 1e3px สำหรับ _radius ใช้สัญกรณ์วิทยาศาสตร์เพื่อแสดงตัวเลขขนาดใหญ่ ดังนั้น 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 เบราว์เซอร์จะตรวจสอบความคมชัดที่เหมาะสม ซึ่งเป็นเรื่องที่ดีมาก

สีสว่างและสีเข้มที่ปรับแต่งได้ทั้งหมด

ตั้งค่าพร็อพเพอร์ตี้ที่กำหนดเอง 2 รายการในองค์ประกอบ <progress> โดย 1 รายการสำหรับสีแทร็ก และอีก 1 รายการสำหรับสีความคืบหน้าของแทร็ก ใน prefers-color-scheme ของ Media Query ให้ระบุค่าสีใหม่สำหรับแทร็กและความคืบหน้าของแทร็ก

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 เพื่อปรับแต่งโฟกัสเพื่อเลือกใช้สไตล์กรอบโฟกัสที่ฉลาดขึ้น เมื่อใช้การตั้งค่านี้ การคลิกเมาส์และโฟกัสจะไม่แสดงวงแหวนโฟกัส แต่การคลิกแป้นพิมพ์จะแสดง วิดีโอ YouTube นี้อธิบายเรื่องนี้อย่างละเอียดและควรค่าแก่การดู

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

ภาพหน้าจอของแถบการโหลดที่มีวงโฟกัสรอบๆ สีทั้งหมดตรงกัน

รูปแบบที่กำหนดเองในเบราว์เซอร์ต่างๆ

ปรับแต่งสไตล์โดยเลือกส่วนขององค์ประกอบ <progress> ที่แต่ละเบราว์เซอร์แสดง การใช้องค์ประกอบความคืบหน้าเป็นแท็กเดียว แต่ประกอบด้วยองค์ประกอบย่อย 2-3 รายการที่แสดงผ่านตัวเลือกจำลอง CSS เครื่องมือสำหรับนักพัฒนาเว็บของ Chrome จะแสดงองค์ประกอบต่อไปนี้ให้คุณเห็นหากคุณเปิดใช้การตั้งค่า

  1. คลิกขวาที่หน้าเว็บแล้วเลือกตรวจสอบองค์ประกอบเพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
  2. คลิกไอคอนเฟืองการตั้งค่าที่มุมขวาบนของหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
  3. ในส่วนหัวองค์ประกอบ ให้ค้นหาและเปิดใช้ช่องทําเครื่องหมายแสดงเงา User Agent DOM

ภาพหน้าจอของตำแหน่งใน DevTools ที่เปิดใช้การแสดง Shadow DOM ของ User Agent

สไตล์ Safari และ Chromium

เบราว์เซอร์ที่ใช้ WebKit เช่น 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);
}

ภาพหน้าจอแสดงองค์ประกอบภายในขององค์ประกอบความคืบหน้า

สไตล์ Firefox

Firefox จะแสดงเฉพาะตัวเลือกเสมือน ::-moz-progress-bar ในองค์ประกอบ <progress> ซึ่งหมายความว่าเราไม่สามารถปรับสีแทร็กโดยตรง 

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

ภาพหน้าจอของ Firefox และตำแหน่งที่จะพบส่วนต่างๆ ขององค์ประกอบความคืบหน้า

ภาพหน้าจอของมุมแก้ไขข้อบกพร่องที่ Safari, iOS Safari, Firefox, Chrome และ Chrome ใน Android ทั้งหมดมีแถบการโหลดที่แสดงว่าทำงานอยู่

โปรดทราบว่า Firefox มีการตั้งค่าสีแทร็กเป็น accent-color ส่วน iOS Safari จะมีแทร็กสีฟ้าอ่อน การดำเนินการนี้จะเหมือนกันในโหมดมืด โดย Firefox จะมีแทร็กสีเข้ม แต่ไม่ใช่สีที่กำหนดเองที่เราตั้งไว้ และใช้งานได้ในเบราว์เซอร์ที่ใช้ Webkit

แอนิเมชัน

เมื่อใช้เครื่องมือเลือกแบบสมมติในตัวเบราว์เซอร์ มักจะมีชุดพร็อพเพอร์ตี้ CSS ที่อนุญาตแบบจํากัด

ภาพเคลื่อนไหวของการเติมแทร็ก

การเพิ่มทรานซิชันใน inline-size ขององค์ประกอบความคืบหน้าจะใช้งานได้ใน Chromium แต่ไม่ใช้ใน Safari นอกจากนี้ Firefox ยังไม่ใช้พร็อพเพอร์ตี้การเปลี่ยนใน ::-moz-progress-bar อีกด้วย

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

การทำภาพเคลื่อนไหวสถานะ :indeterminate

ในส่วนนี้ เราใช้ความคิดสร้างสรรค์มากขึ้นเพื่อให้แสดงภาพเคลื่อนไหวได้ ระบบจะสร้างองค์ประกอบจำลองสําหรับ Chromium และใช้การไล่ระดับสีที่มีภาพเคลื่อนไหวไปมาสําหรับเบราว์เซอร์ทั้ง 3 ประเภท

พร็อพเพอร์ตี้ที่กำหนดเอง

พร็อพเพอร์ตี้ที่กำหนดเองมีประโยชน์หลายอย่าง แต่สิ่งที่ฉันชอบที่สุดคือการตั้งชื่อค่า 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 คุณต้องใช้คีย์เฟรมเพียง 1 รายการเท่านั้น ซึ่งเป็นคีย์เฟรมกลางที่ 50% เพื่อสร้างภาพเคลื่อนไหวที่วนกลับไปที่จุดเริ่มต้นซ้ำๆ

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

การกำหนดเป้าหมายเบราว์เซอร์แต่ละรายการ

เบราว์เซอร์บางรุ่นไม่อนุญาตให้สร้างองค์ประกอบจำลองในองค์ประกอบ <progress> เองหรืออนุญาตให้แสดงแถบความคืบหน้าแบบเคลื่อนไหว มีเบราว์เซอร์จำนวนมากขึ้นที่รองรับการทำภาพเคลื่อนไหวของแทร็กมากกว่าองค์ประกอบจำลอง ดังนั้นเราจึงอัปเกรดจากองค์ประกอบจำลองเป็นพื้นฐานและเปลี่ยนไปใช้แถบที่มีภาพเคลื่อนไหว

องค์ประกอบจำลองของ Chromium

Chromium อนุญาตให้ใช้องค์ประกอบจำลอง ::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);
}
แถบความคืบหน้าของ Safari

สำหรับ Safari ระบบจะใช้พร็อพเพอร์ตี้ที่กำหนดเองและภาพเคลื่อนไหวกับแถบความคืบหน้าขององค์ประกอบจำลอง ดังนี้

progress:indeterminate::-webkit-progress-bar {
  background: var(--_indeterminate-track);
  background-size: var(--_indeterminate-track-size);
  background-position: right; 
  animation: var(--_indeterminate-track-animation);
}
แถบความคืบหน้าของ Firefox

สำหรับ Firefox ระบบจะใช้คุณสมบัติที่กำหนดเองและภาพเคลื่อนไหวกับแถบความคืบหน้าขององค์ประกอบจำลองด้วย

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

JavaScript

JavaScript มีบทบาทสำคัญกับองค์ประกอบ <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
  }
}

แก้ไขปัญหาคณิตศาสตร์ทศนิยมของ JavaScript

เนื่องจากเราเลือกที่จะใช้ค่าสูงสุดเริ่มต้นของขั้นตอนที่ 1 ฟังก์ชันการเพิ่มและลดของตัวอย่างจึงใช้คณิตศาสตร์ทศนิยม JavaScript และภาษาอื่นๆ อาจไม่เหมาะเสมอไป ฟังก์ชัน 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 3 ตําแหน่ง ได้แก่

  1. แอตทริบิวต์ value ขององค์ประกอบ <progress>
  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()
}

ภาพหน้าจอของแอป Voice Over ใน Mac OS การอ่านความคืบหน้าของแถบการโหลดให้ผู้ใช้ฟัง

บทสรุป

ตอนนี้คุณรู้วิธีที่เราทำแล้ว คุณจะทำอย่างไรบ้าง 🙂

แน่นอนว่ามีการเปลี่ยนแปลงบางอย่างที่ฉันอยากทำหากมีโอกาสอีกครั้ง เราคิดว่ามีวิธีปรับปรุงคอมโพเนนต์ปัจจุบัน และลองสร้างคอมโพเนนต์แบบไม่จำกัดสไตล์ของคลาสจำลองขององค์ประกอบ <progress> โปรดลองดู

มาลองใช้แนวทางที่หลากหลายและดูวิธีทั้งหมดในการสร้างบนเว็บกัน

สร้างเดโม แล้วทวีตลิงก์มาหาเรา เราจะเพิ่มลงในส่วนรีมิกซ์ของชุมชนด้านล่าง

รีมิกซ์ของชุมชน