W3CSS Progressbar

Progress bars are used to show progress of an activity on a website. For instance when you download or upload some file from the internet, you often see a progress bar displaying the percentage of data downloaded or uploaded. Creating W3CSS progressbar is very simple. You do not need to learn anything new, rather you can create progress bars using concepts you already know. So lets create a basic W3CSS progressbar.

Basic W3CSS Progressbar

To create basic progress bar, you need to create two divs. An outer div with the background color. And an inner div with some height and width property set. Set the width in percentage, this is the progress that has been made by progress bar. For instance in the following example, we create an outer div with class w3-grey. This will be the background color of the progress bar. Inside that, we create another div with background w3-green. We set its height to 30px and width to 60%. This will create a progress bar with green fore color, 30 pixels high and 60% completion. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


<div class="w3-grey">
  <div class="w3-green" style="height:30px;width:60%"></div>
</div>
    

</body>
    
</html>

Download the code Try the code

Show Progress Using Number

In the previous example, we did not display any number on the progress bar. You can display progress percentage by mentioning it in between the opening and closing tags of the inner div.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-yellow">
  <div class="w3-container w3-blue w3-center" style="width:25%">40%</div>
</div>
    

</body>
    
</html>

Download the code Try the code

Progressbar Sizes

You can also change size of the progress bar via size classes e.g w3-small, w3-xlarge, w3-jumbo etc. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-yellow w3-xlarge">
  <div class="w3-container w3-blue w3-center" style="width:25%">40%</div>
</div>
    

</body>
    
</html>

Download the code Try the code

Rounded Progressbar

You can also create rounded progress bar via w3-round class. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-yellow w3-xlarge w3-round">
  <div class="w3-container w3-blue w3-center" style="width:25%">40%</div>
</div>
    

</body>
    
</html>

Download the code Try the code

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .