Foundation CSS Progress Bar Screen Reader

A Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it.

Foundation CSS Progress bar provides us with a simple solution to add a progress element to our web page. It helps us to show the progress of a process or how much is still left. We can use Foundation CSS classes to create a progress bar very easily. It mainly comprises two classes one is the progress class used to create the progress container and the other one is the progress-meter which is used to create the progress bar. The status of the progress bar is described by the role and aria- attributes. 

The list below clarifies the objectives of the attributes:

• aria-valuemin: It denotes the minimum value for the progress bar.
• aria-valuemax: It denotes the maximum value for the progress bar.
• aria-valuenow: It denotes the value for the progress bar.
• aria-valuetext: It provides a readable numeric value of the progress bar.  

Syntax:

<div class="progress" role="progressbar" aria-valuenow="value" 
 aria-valuemin="value" aria-valuemax="value">
 <div class="progress-meter"></div>
</div>

Example 1: Below is the demonstration of a simple Progress Bar.

Output:       

👁 Image

Example 2: This code demonstrates the uses of different colors classes to have colored progress bars.

Output:

👁 Image

Example 3: This example shows how to add text to a progress bar, we can do that by adding the text in the span tag with the class progress-meter-text. 

Output:

👁 Image

Example 4: We can also use the native <progress>element to build a custom progress bar. It is a brief way of creating a progress bar but it is not supported in Internet Explorer 9 or other older browsers. 

Output:             

👁 Image

Example 5: We can also add the color classes to the progress element to make a colorful element with this element.

Output:         

👁 Image

Reference: https://get.foundation/sites/docs/progress-bar.html