Foundation CSS Progress Bar Screen Reader
Last Updated :
20 Apr, 2022
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.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
crossorigin="anonymous"/>
<link rel="stylesheet" href=
crossorigin="anonymous"/>
<title>Foundation CSS Progress Bar Screen Reader</title>
</head>
<body>
<h1 class="text-center" style="color:#009900">GeeksforGeeks</h1>
<h3 class="text-center">Foundation CSS Progress Bar Screen Reader</h3>
<div class="progress margin-2" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100">
<div class="progress-meter" style="width:50%"></div>
</div>
<pre class="text-center">
This is a simple progress bar with 50% value.
</pre>
</body>
</html>
|
Output:
Example 2: This code demonstrates the uses of different colors classes to have colored progress bars.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
crossorigin="anonymous"/>
<link rel="stylesheet" href=
crossorigin="anonymous"/>
<title>Foundation CSS Progress Bar Screen Reader</title>
</head>
<body>
<h1 class="text-center" style="color:#009900">GeeksforGeeks</h1>
<h3 class="text-center">Foundation CSS Progress Bar Screen Reader</h3>
<div class="secondary progress margin-2" role="progressbar"
aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent"
aria-valuemax="100">
<div class="progress-meter" style="width:25%"></div>
</div>
<div class="success progress margin-2">
<div class="progress-meter" style="width:50%"></div>
</div>
<div class="warning progress margin-2">
<div class="progress-meter" style="width:50%"></div>
</div>
<div class="alert progress margin-2">
<div class="progress-meter" style="width:75%"></div>
</div>
<pre class="text-center">
Usage of different classes to have colored progress bars.
</pre>
</body>
</html>
|
Output:
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.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
crossorigin="anonymous"/>
<link rel="stylesheet" href=
crossorigin="anonymous"/>
<title>Foundation CSS Progress Bar Screen Reader</title>
</head>
<body>
<h1 class="text-center" style="color: #009900">GeeksforGeeks</h1>
<h3 class="text-center">Foundation CSS Progress Bar Screen Reader</h3>
<div class="progress margin-2" role="progressbar" aria-valuenow="25"
aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100">
<span class="progress-meter" style="width:50%">
<span class="progress-meter-text">50%</span>
</span>
</div>
<pre class="text-center">
50% progress bar
</pre>
</body>
</html>
|
Output:
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.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
crossorigin="anonymous"/>
<link rel="stylesheet" href=
crossorigin="anonymous"/>
<title>Foundation CSS Progress Bar Screen Reader</title>
</head>
<body>
<h1 class="text-center" style="color:#009900">GeeksforGeeks</h1>
<h3 class="text-center">Foundation CSS Progress Bar Screen Reader</h3>
<progress class="width-100" max="100" value="75" style="height:3em">
</progress>
<pre class="text-center">
Using native Progress element to make a progress bar.
</pre>
</body>
</html>
|
Output:
Example 5: We can also add the color classes to the progress element to make a colorful element with this element.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
crossorigin="anonymous"/>
<link rel="stylesheet" href=
crossorigin="anonymous"/>
<title>Foundation CSS Progress Bar Screen Reader</title>
</head>
<body>
<h1 class="text-center" style="color: #009900">GeeksforGeeks</h1>
<h3 class="text-center">Foundation CSS Progress Bar Screen Reader</h3>
<meter class="width-100" value="30" min="0" low="33" high="66"
optimum="100" max="100" style="height:3em">
</meter>
<meter class="width-100" value="50" min="0" low="33" high="66"
optimum="100" max="100" style="height:3em">
</meter>
<meter class="width-100" value="100" min="0" low="33" high="66"
optimum="100" max="100" style="height:3em">
</meter>
<pre class="text-center">
Using meter element to make a progress bar.
</pre>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/progress-bar.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...