如何制作带凹槽的条带？

我可以建议：

loading-container 类块只指定加载条的位置和中心。

<div class="loading-container">
    <div class="loading-bar">
        <div class="amount green" style="width: 40%;"> <!-- The width (and colour in class) -->
            <div class="loaded">
                40% <!-- Loaded amount -->
            </div>
            <div class="lines"></div> <!-- The lines! -->
        </div>
    </div>
</div>

首先，让我们为loading-container类块设置样式。只需几个属性即可使加载栏居中。

.loading-container {
    width: 600px;
    height: 300px;
    padding: 50px;
    margin: 0px auto;
    border-radius: 10px;
    background: rgba(255,255,255,0.6);
    border: 1px solid #eee;
}
.loading-container .loading-bar {
    margin-bottom: 40px;
}

之后，让我们设置loading-bar和amount类块的样式。loading-bar类块将是固定宽度，而数量类块 的大小将是父块的百分比。然后，您可以更改 数量类块的宽度以适应加载步骤。

.loading-bar {
    width: 500px;
    margin: 0px auto;
    height: 61px;
    border-radius: 5px;
    background-color: #282f32;
    padding: 4px 5px;
    box-shadow: inset 3px 0px 10px rgba(0,0,0,0.1);
}
.amount {
    /* we haven't included the colour yet, we'll get to that later. */
    height: 60px;
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    margin-top: -9px;
}

接下来，我们来看看定义背景的lines类。最有趣的是它使用SVG元素作为背景。 完成CSS样式后，我们将创建SVG文件。我们还将为这个类设置所有动画，稍后会讨论。如果浏览器不支持动画，加载栏将是静态的，这还不错。

.lines {
    /* the lines overflow the container. This creates a continuous flow of the background */
    width: 200%;
    /* We use a SVG file as the background */
    background: url('lines.svg') repeat-x;
    height: 120%;
    text-align: center;
    margin-top: -35px;
    /* Any overflow is hidden */
    overflow: hidden;
    border-radius: 50px;
    /* Implement the animations, we'll get to that later */
    -webkit-animation: moveBars 1s linear infinite;
    -moz-animation: moveBars 1s linear infinite;
    -ms-animation: moveBars 1s linear infinite;
    -o-animation: moveBars 1s linear infinite;
    animation: moveBars 1s linear infinite;
    font-weight: bold;
    color: #fff;
    color: 1px;
    font-size: 18px;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

创建以下类只是为了 设置加载栏顶部的文本样式。

在那之后，我们终于转向鲜花。只需添加您想要的任何块阴影和背景颜色。

.loaded {
    text-align: center;
    font-family: Helvetica, sans-serif;
    font-weight: bold;
    position: relative;
    top: 9px;
    font-size: 30px;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    color: #fff;
    z-index: 9999;
}

.green {
    background-color: #8ac320;
    box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #79aa1e , 0 7px 0 #628c14;
}

.blue {
    background-color: #20b9c3;
    box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #1e8aaa, 0 7px 0 #13768c;
}
.red {
    background-color: #dc6565;
    box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #d23333, 0 7px 0 #8c1212;
}

最后，动画。我们需要做的就是将线条类块向左移动 180 像素。因此，在100 % 时，即在动画结束时，将左边距更改为-180px。由于供应商前缀，动画通常在CSS文件中占用大量空间，但这里所有内容都适合5行：

/* ANIMATIONS */
@keyframes moveBars { 100% { margin-left: -180px; } }
@-webkit-keyframes moveBars { 100% { margin-left: -180px; } }
@-moz-keyframes moveBars { 100% { margin-left: -180px; } }
@-ms-keyframes moveBars { 100% { margin-left: -180px; } }
@-o-keyframes moveBars { 100% { margin-left: -180px; } }

这就是CSS代码。

现在让我们转到由SVG文件组成的背景。

<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180">
  <title>Diagonal Lines</title>
  <desc>Some diagonal lines for use in the loading bar.</desc>
 <polygon fill="white" opacity="0.2" points="90,0 180,0 90,180 0,180" />
</svg>

这个条目是什么意思？第一行类似于HTML文档的文档类型。之后，我们为SVG命名和描述，以获得正确且易于理解的结构。然后我们画一个多边形。它只是一个0.2 opacity 的白色形状。然后我们设置点。这些是文档中我们要放置多边形的坐标。每组点由一个空格分隔。毕竟，您所要做的就是将此代码放入名为lines.svg的文件中，并将其保存在与您的CSS文件 相同的类别中。

资源