带有文本和点的进度栏

时间：2018-10-23 03:49:11

标签： html css

我要创建进度条，如下图所示。

enter image description here

我不知道如何创建它。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分：0)

这是使用Bootstrap的一种方法：

.bar-step {
  position: absolute;
  margin-top: -20px;
  z-index: 1;
  font-size: 12px;
}

.label-txt {
  float: left;
}

.label-line {
  float: right;
  background: #000;
  height: 50px;
  width: 1px;
  margin-left: 5px;
}

.label-percent {
  float: right;
  margin-left: 5px;
}
<head> 
<link href="https:////maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>

<div class="container">
  <div class="row"><br>
    <div class="col-xs-12">
      <div class="progress">
        <div class="bar-step" style="left: 100%">
          <div class="label-txt">Level 3</div>
          <div class="label-percent"></div>
          <div class="label-line"></div>

        </div>
        <div class="bar-step" style="left: 33%">
          <div class="label-txt">Level 1</div>
          <div class="label-percent"></div>
          <div class="label-line"></div>
        </div>
        <div class="bar-step" style="left: 33%">
          <div class="label-txt">Testing 123</div>
          <div class="label-percent"></div>
          <div class="label-line"></div>
        </div>
        <div class="progress-bar progress-bar-success" style="width: 46%;"></div>
      </div>
    </div>
  </div>
</div>
</body>

贷记给timgomm https://bootsnipp.com/snippets/1KnKq

注意：我只是在猜测百分比-您将需要以内联样式编辑百分比以适合您。

相关问题
最新问题