条形图，如引导进度条答案

【问题标题】：Bar chart, like bootstrap progress bar条形图，如引导进度条
【发布时间】：2015-09-04 05:04:31
【问题描述】：

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

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

所以我想我可以使用引导进度条，但样式有点不同。

这就是它在 html 中的样子 http://www.bootply.com/QOwn8Bs0wY

有谁知道我现在如何将线条更改为更接近？

我认为这与引导程序中的这些 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)

但我无法复制图片。

【问题讨论】：

.progress-bar-striped { 背景：重复线性渐变（135deg，#464，#8f8 3px，#868 1px）}
不错，但看起来不够近

标签： javascript css progress-bar bar-chart

【解决方案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一点，比bootstrap更容易理解。然后别忘了让它跨浏览器兼容。

【讨论】：

【解决方案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;
}

【讨论】：