CODEWITHSUNDEEP
htmlcss
Ashish Rathore
Ashish Rathore

Reputation: 2696

How to show blocks for progressbar using CSS

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:

enter image description here

Upvotes: 1

Views: 3081

Answers (5)

Sami
Sami

Reputation: 1051

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>

Upvotes: -1

Itay
Itay

Reputation: 16777

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:

Upvotes: 0

Anshu Dwibhashi
Anshu Dwibhashi

Reputation: 4675

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;

Upvotes: 0

Jack Cole
Jack Cole

Reputation: 1794

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>

enter image description here

Upvotes: 2

Falguni Panchal
Falguni Panchal

Reputation: 8981

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);
}

Upvotes: 1

Related Questions