Bootstrap 4.0 进度条中的垂直线标记

Question

我一直在做一个项目，我想用引导进度条显示给定预算年度目标的每月进度。我想在进度条中用垂直线显示目标（见图）。我已经把我一直在做的和我想能够做的。

我拥有的：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 46.573611111111106%" aria-valuenow="46.573611111111106" aria-valuemin="0" aria-valuemax="100"></div>
</div>

我想完成的事情：

Answer 1

您可以使用线性渐变来实现与您的图表非常接近的东西

实际上，您将使用这种方法添加两个进度条背景。然而，有一个复杂的问题，因为width每次width进度条增加时都需要重新计算目标标记的测量值。应该可以使用 jQuery 动态地重新计算标记的位置。

对于渐变，在进度量和进度目标之间留出透明度，rgba(255, 255, 255, 0.1)然后使用适合您目的的任何颜色/宽度作为结束标记：

在这个例子中，我只是width在我调用的第二个进度条的样式中添加了 10% .progress-bar-marker：

HTML

<div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 46.573611111111106%" aria-valuenow="46.573611111111106" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar-marker" role="progressbar" style="width: 10%" aria-valuenow="46.573611111111106" aria-valuemin="0" aria-valuemax="100"></div>
</div>

CSS

.progress-bar-marker { 
  background-image: linear-gradient(90deg, rgba(225, 225, 225, 0.1) 97%, rgba(204, 0, 0, 1) 3%);
}

<div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 46.573611111111106%" aria-valuenow="46.573611111111106" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar-marker" role="progressbar" style="width: 10%" aria-valuenow="46.573611111111106" aria-valuemin="0" aria-valuemax="100"></div>
</div>

.progress-bar-marker { 
  background-image: linear-gradient(90deg, rgba(225, 225, 225, 0.1) 97%, rgba(204, 0, 0, 1) 3%);
}