How to show blocks for progressbar using CSS

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:

enter image description here

There are multiple ways to achieve that, but what did you already try? — George, Aug 16 '13 at 07:17
You can also use `progress` tag .. http://jsfiddle.net/RpGwL/ — Mr. Alien, Aug 16 '13 at 07:23
Yes i can use progress tag.But i want to show xp-style progress bar blocks in my div tag in any browsers and wit any operating system. For that background image is a best solution. — Ashish Rathore, Aug 16 '13 at 08:32
Your idea requires js. Pure CSS is impossible, because CSS is only for styling, as in how much % the image would fill the div. — Daniel Cheung, Feb 09 '14 at 05:54

score 2 · Accepted Answer · answered Aug 16 '13 at 07:21

2

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

answered Aug 16 '13 at 07:21

Jack Cole

1,528
2
19
41

1

your code would display half blocks, XP doesn't do that. It does not help OP much – Daniel Cheung Feb 09 '14 at 09:17
but you can still increase the progress only when you know one entire block will be changed. – Machado Nov 18 '19 at 21:39

score 1 · Answer 2 · answered Aug 16 '13 at 07:20

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

@Fags your progress bar is referenced from Bootstrap, you should relay a link to Bootstrap's page! http://getbootstrap.com/ — Daniel Cheung, Feb 09 '14 at 05:51

Anshu Dwibhashi · Answer 3 · 2013-08-16T07:25:37.403

0

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;

edited Aug 16 '13 at 07:25

answered Aug 16 '13 at 07:16

Anshu Dwibhashi

4,617
3
28
59

score 0 · Answer 4 · edited May 23 '17 at 12:05

0

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:

edited May 23 '17 at 12:05

Community

1
1

answered Aug 16 '13 at 07:19

Itay

16,601
2
51
72

I think OP's question was if he can show progress using CSS, displaying in blocks. I think it would be impossible to do with only CSS. It requires JS. – Daniel Cheung Feb 09 '14 at 05:53
@DanielCheung Thank you for your reply but I believe the question is how to create the blocks themselves, not how to manipulate them – Itay Feb 09 '14 at 09:09

score -1 · Answer 5 · answered Aug 16 '13 at 07:32

-1

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>

answered Aug 16 '13 at 07:32

Sami

1,041
3
16
32

I have added padding. and proposed to keep the styling isolated coz in-line css is not a good practice and given the second choice as well. – Sami Aug 16 '13 at 07:49

How to show blocks for progressbar using CSS

Looks like this:

5 Answers5

Linked