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的{{1}}样式添加了10％：

HTML

.progress-bar-marker

CSS

<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%);
}

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

Answer 2

我想要一个带有目标指示器的进度条，所以我自己也为此苦苦挣扎了一段时间，最后我想我通过在网格中堆叠两层找到了一个优雅的解决方案。我的解决方案是基于尽可能多地使用原生 bootstrap 4 的前提。

我自己只是在学习 CSS，所以我希望人们对我的解决方案不满意，并提供反馈供我学习。无论如何，我会对这个代码片段感到满意。

/* Css to show a target marker in the progress bar */


/*/* This allows us to overlay two objects. The first object (div) is the background, second object (div) is the foreground. */

.stack {
  display: grid;
}

.stack>* {
  grid-row: 1;
  grid-column: 1;
}


/*/* Create a target box to contain the dot and the actual dot */

.targetdotbox {
  margin-left: -17.5px;
  padding-right: 17.5px;
}

.targetdot {
  position: relative;
  height: 20px !important;
  width: 35px !important;
  border-radius: 5px;
}

<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<div class="card h-100">
  <div class="card-header d-flex align-items-center justify-content-center" style="min-height: 3rem;">
    <div class="text-center">A card with a progress bar and a target</div>
  </div>

  <div class="card-body">
    <div class="d-flex justify-content-between mb-1">
      <div class="col pl-0 text-center">
        <span class="text-muted font-small d-block mb-2">Starting</span>
        <span class="h5 text-dark font-weight-bold">Q1 2020</span>
      </div>
      <div class="col pl-0 text-center">
        <span class="text-muted font-small d-block mb-2">Ending</span>
        <span class="h5 text-dark font-weight-bold">Q4 2020</span>
      </div>
    </div>
    <div class="text-center text-muted font-small d-block mb-2">Progression</div>

    <div class="stack pl-2 pr-2"> <!-- Accomodate some extra space for the marker to stick out -->
      <div class="progress" style="height: 20px">
        <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>

      </div>
      <div class="targetdotbox">
        <div class="progress progress-bar targetdot bg-success" style="left: 75%">75%</div>
      </div>
    </div>
  </div>
</div>

</html>

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

2 个答案: