条形图，就像bootstrap进度条

Question

我正在努力实现以下目标：

我基本上希望这些代表我从数据库中提取的数据。但我无法计算出实现这一目标的时间。

所以我认为我可以使用bootstrap进度条但是它的样式有点不同。

这就是html中的情况 http://www.bootply.com/QOwn8Bs0wY

有谁知道我现在怎么能更改线条更接近？

我认为它与bootstrap中的这些css样式有关。

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

但我不能复制这张照片。

Answer 1

这样的东西？

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

我稍微修改了this，它比引导程序更容易理解。然后别忘了让它与浏览器兼容。

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