A bar chart, such as a loading indicator

Question

I am trying to achieve this below:

I basically want them to display the data I retrieve from the database. But I can’t find the hour to achieve this.

So, I realized that I can use the bootstrap progress bar, but changed it a bit.

Here's how it would be in the html http://www.bootply.com/QOwn8Bs0wY

Does anyone know how I can now change lines much closer?

I think this is done 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 can not reproduce the picture.

Answer 1

Something like that?

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 changed this one a bit , it's easier to understand than bootable. Then be sure to make it compatible with your browser.

Answer 2

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