Progress Bar with text and points

Question

I want to create progress bar as in below image.

I do not know how to create this. Any help would be appreciated.

Did you check this? https://stackoverflow.com/questions/7190898/progress-bar-with-html-and-css — m4n0, Oct 23 '18 at 03:52
@ManojKumar I already checked the link that you mentioned. I don't know how to show the text and points. — Sandar Min Aye, Oct 23 '18 at 04:01

score 0 · Accepted Answer · answered Oct 23 '18 at 04:03

Here's a way to do it with 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>

Credit goes to timgomm https://bootsnipp.com/snippets/1KnKq

NOTE: I am just guessing the percentages - you will need to edit the percentages in the inline styles to suit you.

Progress Bar with text and points

1 Answers1