CSS3进度条 - 锯齿状条纹

Question

我正在尝试像这样编码进度条。

http://www.red-team-design.com/stylish-css3-progress-bars

（第一个带条纹）

问题解释

当我编辑我的进度条（我自己的颜色，宽度，移除的动画等）时，它看起来不平滑，看起来像是锯齿状。

这是截图：

这是现场预览：

http://tvojaskola.eu/test.html

HTML代码：

<div class="col-2"><div class="progress-bar blue stripes">
    <span style="width: 60%"></span>
</div> 
</div>

CSS代码：

.progress-bar {
  background-color: rgba(236,236,236,1);
    height: 25px;
    width: 60%;
    margin-bottom: 30px;            
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;  
}
.progress-bar span {
  float: left;
    display: inline-block;
    height: 100%;   
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;  
}
.blue span {
    background-color: #224b8f;   
}
.stripes span {
    -webkit-background-size: 10px 10px;
    -moz-background-size: 10px 10px;
    background-size: 10px 10px;         
    background-image: -webkit-gradient(linear, left top, right bottom,
                        color-stop(.25, rgba(236, 236, 236, 1)), color-stop(.25, transparent),
                        color-stop(.5, transparent), color-stop(.5, rgba(236, 236, 236, 1)),
                        color-stop(.75, rgba(236, 236, 236, 1)), color-stop(.75, transparent),
                        to(transparent));
    background-image: -webkit-linear-gradient(135deg, rgba(236, 236, 236, 1) 25%, transparent 25%,
                        transparent 50%, rgba(236, 236, 236, 1) 50%, rgba(236, 236, 236, 1) 75%,
                        transparent 75%, transparent);
    background-image: -moz-linear-gradient(135deg, rgba(236, 236, 236, 1) 25%, transparent 25%,
                        transparent 50%, rgba(236, 236, 236, 1) 50%, rgba(236, 236, 236, 1) 75%,
                        transparent 75%, transparent);
    background-image: -ms-linear-gradient(135deg, rgba(236, 236, 236, 1) 25%, transparent 25%,
                        transparent 50%, rgba(236, 236, 236, 1) 50%, rgba(236, 236, 236, 1) 75%,
                        transparent 75%, transparent);
    background-image: -o-linear-gradient(135deg, rgba(236, 236, 236, 1) 25%, transparent 25%,
                        transparent 50%, rgba(236, 236, 236, 1) 50%, rgba(236, 236, 236, 1) 75%,
                        transparent 75%, transparent);
    background-image: linear-gradient(135deg, rgba(236, 236, 236, 1) 25%, transparent 25%,
                        transparent 50%, rgba(236, 236, 236, 1) 50%, rgba(236, 236, 236, 1) 75%,
                        transparent 75%, transparent);            
}

有什么想法吗？谢谢，伙计们。

Answer 1

请尝试使用repeating-linear-gradient。

Answer 2

您可以查看引导进度条

http://twitter.github.com/bootstrap/getting-started.html

我认为他们甚至可以使用javascript来使其自行移动