Bar chart, like bootstrap progress bar

Question

I am trying to achieve this below:

I basically want these to represent data i'm pulling from database. But i cannot figure out hour to achieve this.

So i figured i can possibly use bootstrap progress bar but style it a little different.

This is how it would be in html http://www.bootply.com/QOwn8Bs0wY

Does anyone know how i can now change the lines to be a lot closer?

I think its to do with these css styles in bootstrap.

 -webkit-linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)

But i cannot replicate the picture.

Answer 1

Something like this?

background-color: gray;
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.5) 5px, rgba(255,255,255,.5) 10px);

I modified this a bit, it's easier to understand than the bootstrap one. Then don't forget to make it cross browser compatible.

Answer 2

try this

.progress {border-radius:0;}
.progress-bar-striped, .progress-striped .progress-bar {
    linear-gradient(135deg, 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: 7px 7px;
}