Adding progress indicators with w3-progress
W3.CSS web development script has a built-in readymade class named w3-progress already defined, which web developers can easily add or display as a progress bar in any of their webpage website projects. These custom progress bar classes can be used on website webpages to visually represent or display the current progress of a task or process (such as a file upload to a dedicated server, online form data submission, software installation, a 0 to 100 counter, or any system-defined long-running online or offline task.
Basic progress bar concept in W3.CSS.
W3.CSS is the easiest method or concept to create a progress bar in web development scripts. To insert or display a progress bar on a webpage, you can use the w3-progress class with a fixed size width.
Example of a basic progress bar in W3.CSS web development.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Progress Bar Attributes in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<h2>Basic Structure of Progress Bar</h2>
<div class=”w3-progress-container w3-pink”>
<div class=”w3-progressbar w3-indigo” style=”width:30%”>30%</div>
</div>
</body>
</html>
Explanation of a basic progress bar in W3.CSS web development.
- w3-progress-container – In this example, this is an external container size for the progress bar. The w3-pink color class is used to provide a neutral background color for the progress bar. It is styled or decorated.
- w3-progressbar – This is the class for the actual progress bar element in the current webpage. The style=”width:30%” attribute displays the current progress bar at a 30% percentage. You can manually change the percentage to any value between 0% and 100% to display a real-time progress bar on your current webpage.
- Color class – The w3-indigo color is used to display the color of the progress bar on the current webpage. Web developers can apply other progress bar color classes, such as w3-lime, w3-pink, w3-yellow, w3-indigo, etc., to modify the progress bar appearance on the current webpage.
Using multiple progress bars in W3.CSS web development.
In W3.CSS web development scripts, web developers can create and display multiple progress bars for multiple tasks simultaneously on a single webpage. You can manually display multiple progress bars with different percentages using the w3-progress-bar class.
Example of using multiple progress bars in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Multiple Progress Bars in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<h2>Let’s Try Multiple Progress Bars In Webpage</h2>
<div class=”w3-progress-container w3-light-blue”>
<div class=”w3-progressbar w3-yellow” style=”width:37%”>37% </div>
</div>
<div class=”w3-progress-container w3-light-grey”>
<div class=”w3-progressbar w3-brown” style=”width:70%”>70%</div>
</div>
<div class=”w3-progress-container w3-light-grey”>
<div class=”w3-progressbar w3-indigo” style=”width:94%”>94%</div>
</div>
<div class=”w3-progress-container w3-red”>
<div class=”w3-progressbar w3-green” style=”width:50%”>50%</div>
</div>
</body>
</html>
Explanation of using multiple progress bars in W3.CSS.
- In this example, we display four different multiple progress bar colors. Here, we can display task completion or progress values by assigning each progress bar to different color classes (w3-yellow, w3-brown, w3-indigo, w3-green) and different progress bar percentage values (37%, 70%, 94%, and 50%).
- With W3.CSS, web developers can adjust the width of each progress bar to different percentage sizes to represent the graphical process of webpage task completion at different levels for different webpage website tasks.
