How to show blocks for progressbar using CSS - html

Question

I have a div with 100% width on my page.
Now I need to show blocks into a <div> just like windows progressbar can anyone tell how I can create those blocks in the my div?
Looks like this:

Answer 1

I copied #Anshuman Dwibhashi answer, but I changed the background to a piece of the image you posted. Now you just increase or decrease the percentage width of .sub-block to change the load bar progress.
<div class="main" style="border:solid;background-color:white;width:500px;height:25px;">
<div class="sub-block" style="background:url('http://i.imgur.com/PRBmb4s.png');width:30%;height:25px;" ></div>
</div>

Answer 2

Like this
DEMO
CSS
.progress-striped .bar {
background-color: #149BDF;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}
.progress .bar {
-moz-box-sizing: border-box;
background-color: #0E90D2;
background-image: linear-gradient(to bottom, #149BDF, #0480BE);
background-repeat: repeat-x;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
color: #FFFFFF;
float: left;
font-size: 12px;
height: 100%;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
transition: width 0.6s ease 0s;
width: 0;
}
.progress {
background-color: #F7F7F7;
background-image: linear-gradient(to bottom, #F5F5F5, #F9F9F9);
background-repeat: repeat-x;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
height: 20px;
margin-bottom: 20px;
overflow: hidden;
}
.progress-striped .bar {
background-color: #149BDF;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}
.progress-success.progress-striped .bar, .progress-striped .bar-success {
background-color: #62C462;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

Answer 3

Try this:
DEMO
CSS
.main {
border: solid;
background-color: white;
width: 500px;
height: 25px;
}
.sub-block {
background-color: green;
display:inline-block;
width: 20px;
height: 25px;
}
HTML
<div class="main" >
<div class="sub-block" ></div>
</div>
add more number of sub-blocks according to your need;

Answer 4

Create an image file of that Block and use it as a background for the progress inner element. Give the background repeat-x.
For instance:
background: url("Block.png") left top repeat-x transparent;
For further reading:
http://css-tricks.com/css3-progress-bars/
Progress Bar with HTML and CSS
Creating & Styling Progress Bar With HTML5

Answer 5

In your HTML
<div class="block-container">
<div class="sub-block" ></div>
<div class="sub-block" ></div>
<div class="sub-block" ></div>
.
.
.
</div>
In your css file
.block-container
{
background-color:white;
width: 500px;
height: 25px;
}
.sub-block {
background-color: green;
width: 20px;
height: 25px;
padding-left: 3px;
}
OR
<div class='fix size'>
<div style="width:100%;">
<div>
10 sub-div 10% each
</div>
</div>
</div>