如何实现自定义进度条答案

【问题标题】：how to implement custom progress bar如何实现自定义进度条
【发布时间】：2016-11-21 17:05:10
【问题描述】：

我需要这些背景作为进度条。最初颜色很浓，后来颜色很浅。这个进度条的设计如何实现？

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

【问题讨论】：

@SumnerEvans 请看我的代码。我需要背景色css。

标签： html css progress-bar

【解决方案1】：

如果您使用的是引导程序，您也可以使用它们的进度条。它们非常定制。在这里阅读更多：http://www.w3schools.com/bootstrap/bootstrap_progressbars.asp

【讨论】：

我想要进度条的背景色css。
我不确定你在这里问什么。你想要它的颜色吗？比如，你不知道那是什么颜色？
我们只能应用一种颜色。背景有两种颜色。
引导类 .progress-bar-striped 应该可以工作。

【解决方案2】：

您可以在progressBarInnerBody 中再添加一个<div>(.shade)。 .shade 将覆盖整个内部 div，然后在 .shade 上添加线性渐变。

更新：

从您的小提琴中添加条纹

你的问题是：

你应该在progressBarInnerBody而不是shade中添加条纹
您需要将background-size 提供给progressBarInnerBody

这里是sn-p：

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>

【讨论】：

@gurubuddy 有帮助吗？
它有帮助，但是当我添加动画条纹 css 时，我没有得到像上图那样精确的条纹。你能帮帮我吗？
@gurubuddy 你能分享你的小提琴吗？我会检查一次。
jsfiddle.net/2wf5m6m4 。条纹不会覆盖在进度条上。请帮忙。
请在下面找到小提琴的网址。条纹不会覆盖在进度条上。请帮忙。