Introduction
This chapter demonstrates about the W3CSS Progress Bars which are used to show to how far along user is in process and following are the concepts are covered in this chapter.
- Basic Progress Bar
- Different Progress Bars
Description
Progress bars are used to show how far along user is in process. In which w3-progress-container class is used to define container for progress bar and the default color for container is light-grey and w3-progressbar class defines filled area of a progress bar and the default color is grey and width can be set by CSS width property which is shown in below image.
The code below demonstrates the Basic Progress bar as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Progress Bar</h2>
<p>The w3-progress-container class defines a container for the progress bar, and the w3-progressbar defines the filled area of a progress bar. Set the width of the progress bar with the CSS width property (from 0 to 100%).</p>
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:35%"></div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
W3.CSS have different types Progress Bars which can be used for multiple purposes and which have different properties and following are some progress bars as shown below.
Progress Bar Width
User can also change the width of the progress bars by using the CSS width property which can be rabnged from 0 to 100%. The code below demonstrates the Progress Bar Width as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Progress Bar Width</h2>
<p>Change the width of the progress bar with the width property (from 0 to 100%).</p>
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:25%"></div>
</div><br>
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:50%"></div>
</div><br>
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:75%"></div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Progress Bar Color
User can also chnage the color of the progress bar by using the w3-color class and the grey color is the default color of the progress bar. The code below demonstrates the Progress Bar Color as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Progress Bar Colors</h2>
<p>Use any of the w3-color classes to change the color of the progress bar.</p>
<div class="w3-progress-container">
<div class="w3-progressbar w3-blue" style="width:25%"></div>
</div><br>
<div class="w3-progress-container">
<div class="w3-progressbar w3-red" style="width:50%"></div>
</div><br>
<div class="w3-progress-container w3-pale-blue">
<div class="w3-progressbar w3-purple" style="width:75%"></div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Progress Bar Size
User can also get the Progress Bars in different sizes by using the w3-size classes sizes can be available in small large and etc. The code below demonstrates the Progress Bar size as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Progress Bar Size</h2>
<p>Use a w3-<em>size</em> class (w3-small, w3-large, etc) to change the size of the progress bar:</p>
<p>w3-tiny:</p>
<div class="w3-progress-container w3-tiny">
<div id="myBar" class="w3-progressbar" style="width:50%"></div>
</div>
<p>w3-small:</p>
<div class="w3-progress-container w3-small">
<div id="myBar" class="w3-progressbar" style="width:50%"></div>
</div>
<p>Default:</p>
<div class="w3-progress-container">
<div id="myBar" class="w3-progressbar" style="width:50%"></div>
</div>
<p>w3-large:</p>
<div class="w3-progress-container w3-large">
<div id="myBar" class="w3-progressbar" style="width:50%"></div>
</div>
<p>w3-xlarge:</p>
<div class="w3-progress-container w3-xlarge">
<div id="myBar" class="w3-progressbar" style="width:50%"></div>
</div>
<p>w3-xxlarge:</p>
<div class="w3-progress-container w3-xxlarge">
<div id="myBar" class="w3-progressbar" style="width:50%"></div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Progress Bar Labels
User can get the new element inside an w3-progressbar element is used to add labels to the Progress bar. The code below demonstrates to get the Progress Bar with labels as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Progress Bar Labels</h2>
<div class="w3-progress-container">
<div class="w3-progressbar w3-blue" style="width:25%">
<div class="w3-center w3-text-white">25%</div>
</div>
</div><br>
<div class="w3-progress-container">
<div class="w3-progressbar w3-red" style="width:50%">
<div class="w3-center w3-text-white">50%</div>
</div>
</div><br>
<div class="w3-progress-container">
<div class="w3-progressbar w3-purple" style="width:75%">
<div class="w3-center w3-text-white">75%</div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Dynamic Progress Bar
User can also get the dynamic progress bar by using the Java Script which is used to get the how far along progress is in process.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Dynamic Progress Bar</h2>
<div class="w3-progress-container">
<div id="myBar" class="w3-progressbar w3-blue" style="width:1%"></div>
</div>
<br>
<button class="w3-btn w3-purple" onclick="move()">Click Me</button>
</div>
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
When user clicked on the button it will shows the processing as shown in below image.
- Progress Bar Width
- Progress Bar Color
- Progress Bar Size
- Progress Bar Labels
- Dynamic Progress Bar
Key Points
- By using JavaScript user can get the dynamic progress bar.
- User can also get different colored and differnt sized progress bars.
- The default color of container is light grey and progress bar color is grey.