Question

我需要这些背景进度条。最初颜色较厚，后来是浅色。如何为进度条实现此设计？

.progressOuterBody {
  border: 1px solid grey;
  height: 25px;
  border-radius: 64px;
  padding: 1px 10px;
}
.progressBarInnerBody {
  width: 25%;
  background: red;
  /* For browsers that do not support gradients */
  background-image: -webkit-linear-gradient(left, red, yellow);
  /* For Safari 5.1 to 6.0 */
  background-image: -o-linear-gradient(right, red, yellow);
  /* For Opera 11.1 to 12.0 */
  background-image: -moz-linear-gradient(right, red, yellow);
  /* For Firefox 3.6 to 15 */
  border-radius: 45px;
}

<div class="progressOuterBody">
  <div class="progressBarInnerBody">

  </div>
</div>

Answer 1

如果你正在使用bootstrap，你也可以使用他们的进度条。它们非常适合定制。在此处阅读更多内容：(SAR)

Answer 2

您可以在<div>内添加一个.shade（progressBarInnerBody）。 .shade将覆盖整个内部div，然后为.shade添加线性渐变。

更新：

从小提琴中添加条纹

小提琴中的问题是：

您应该在progressBarInnerBody而非shade
您需要提供background-size至progressBarInnerBody

以下是摘录：

function slider_changed(e) {
  $(".progressBarInnerBody").css('width', e.target.value + "%");
}

.progressOuterBody {
  border: 1px solid grey;
  height: 25px;
  border-radius: 64px;
  padding: 3px;
}
.progressBarInnerBody {
  position: relative;
  width: 80%;
  height: 100%;
  background: dodgerblue;
  /* For browsers that do not support gradients */
  background-image: -webkit-linear-gradient(left, dodgerblue, dodgerblue);
  /* For Safari 5.1 to 6.0 */
  background-image: -o-linear-gradient(right, dodgerblue, dodgerblue);
  /* For Opera 11.1 to 12.0 */
  background-image: -moz-linear-gradient(right, dodgerblue, dodgerblue);
  /* For Firefox 3.6 to 15 */
  background-image: linear-gradient(45deg, 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);
  border-radius: 45px;
  background-size: 60px 60px;
  animation: barberpole 0.5s linear infinite;
}
.shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  /* For browsers that do not support gradients */
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent);
  /* For Safari 5.1 to 6.0 */
  background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent);
  /* For Opera 11.1 to 12.0 */
  background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent);
  /* For Firefox 3.6 to 15 */
  border-radius: 45px;
}
@keyframes barberpole {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 60px 0;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</head>

<body>

  <div class="progressOuterBody">
    <div class="progressBarInnerBody">
      <div class="shade">

      </div>

    </div>
  </div>

  <input type="range" id="slider" value="80" oninput="slider_changed(event)">

</body>

</html>

如何实现自定义进度条

2 个答案: