时间戳

首页 > 解决方案 > 带有文本和点的进度条

html - 带有文本和点的进度条

问题描述

我想创建如下图所示的进度条。

在此处输入图像描述

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

标签： htmlcss

解决方案

这是使用 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

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

推荐阅读