Progress Bar Made of Solid Line, with Dots as Steps

Progress bar made of solid line, with dots as steps

My solution is similar to @Stewartside's, except it uses Flexbox to position everything equally. It's also really easy to change the height.

ul.progress-bar {
  height: 300px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
ul.progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5px;
  background: #777;
  width: 5px;
  height: 100vh;
}
ul.progress-bar li {
  background: #000;
  border-radius: 100px;
  width: 15px;
  height: 15px;
  z-index: 1;
  position: relative;
}
ul.progress-bar li.stop ~ li {
  background: #777;
}
ul.progress-bar li.stop ~ li::after {
  height: 0;
}
ul.progress-bar li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 5px;
  background: #000;
  width: 5px;
  height: 100vh;
}

<ul class="progress-bar">
    <li></li>
    <li></li>
    <li></li>
    <li class="stop"></li>
    <li></li>
</ul>

The position of progress dots are not aligning properly when width is changing

Do it differently and consider background-clip like below:

.progress-bar {
  position: relative;
  height: 40px;
  background: 
    linear-gradient(#8fe4bf 0 0) center no-repeat, 
    radial-gradient(circle 5px, #8fe4bf 98%, transparent);
  background-size: 100% 3px, 80px 100%;
}

.progress-bar::before {
  content:"";
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  /* for simplicity I am using the same background 
   and applying a filter to get a different coloration */
  background: inherit;
  filter:brightness(0.7);
  padding-right:calc(100% - var(--p,20%));  /* this will control the progress*/
  background-clip:content-box; /* this will do the magic by clipping the background*/
}

<div class="progress-bar"></div>
<div class="progress-bar" style="--p:50%"></div>
<div class="progress-bar" style="--p:80%"></div>
<div class="progress-bar" style="--p:100%"></div>

How do I show step description on the progress bar?

Here's a way of doing this with flexbox, nice and simple:

jQuery('a[data-toggle="tab"]').on('show.bs.tab', function(e) {    var step = jQuery(e.target).data('step');    var percent = (parseInt(step) / 8) * 100;    jQuery('.progress-bar').css({        width: percent + '%'    });    jQuery('.progress-bar').text("Step " + step + " di 8");});

#wiz_menu {    display: flex;    flex-direction: row;}
#wiz_menu li {    width: 100%;    float: none;    text-align: center;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><div class="progress">    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="8" style="width: 20%;">        Step 1 of 8    </div></div>
<ul id="wiz_menu" class="nav nav-tabs">    <li class="active"><a href="#step1" data-toggle="tab" data-step="1">Your Details</a></li>    <li><a href="#step2" data-toggle="tab" data-step="2">Bank Details</a></li>    <li><a href="#step3" data-toggle="tab" data-step="3">Another step</a></li>    <li><a href="#step4" data-toggle="tab" data-step="4">Step 4</a></li>    <li><a href="#step5" data-toggle="tab" data-step="5">Step 5</a></li>    <li><a href="#step6" data-toggle="tab" data-step="6">Step 6</a></li>    <li><a href="#step7" data-toggle="tab" data-step="7">Step 7</a></li>    <li><a href="#step8" data-toggle="tab" data-step="8">Step 8</a></li></ul>

Vertical line with dots in ends and between

Here's a quick snippet that might help you with your problem:

.bar {  list-style: none;}.bar >li {  position: relative;}.bar>li:before {  content: '\25CF';  margin-right: 10px;  font-size: 20px;}.bar>li:after {  position: absolute;  left: 0;  top: 0;  content: '';  border-left: 2px solid black;  margin-left: 5px;  height: 100%;}.bar >li:first-of-type:after {  top: 50%;}.bar >li:last-of-type:after {  top: -50%;}

<ul class="bar">  <li>element 1</li>  <li>element 2</li>  <li>element 3</li>  <li>element 4</li>  <li>element 5</li></ul>

Progress bar CSS and HTML only

Your problem here is you miss to set position:relative to li. The connect line of li:after is absolute to first not position:inherit ancestor, body if none, in your version the line should be absolute to the li element.

https://jsfiddle.net/bzjs1h9r/2/

my fixes:

li {
  position:relative;
  &.index: {
    position:relative;
    z-index: 3;
  }
  &:before {
    z-index: 2;
    background: #fff;
  }
  &:after {
    z-index: 1;  
  }
}

and also some position adjustments.

ps: the rotate of li:after seems meaningless here.

Is it possible to align the vertical line of the progress Bar as per resolution?

I assigned relative positioning to the parent progress container to align the line with absolute positioning.

Note: I started rule left: 49.5%. Since the line width is 1px. This means that the line is perfectly centered.

Try this code:

style.css

.vertical_line {
  border-left: 1px solid black;
  height: 20px;
  position: absolute;
  top: 0;
  left: 49.5%;
}

.progress_container {
  position: relative;
  display: inline-block;
}

App.js

export default function App() {
  return (
    <div>
      <Card>
        <CardContent
        className={'progress_container'}
        >
          <progress max={1000} value={500} />
          <p className="vertical_line"></p>
        </CardContent>
      </Card>
    </div>
  );
}

Horizontal progess bar with SASS (CSS3)

Use a border-bottom and a pseudo element:

.step{  display: flex;}
.step__item {  display: block;  position: relative;  padding: 0 12px 25px;  border-bottom: 1px solid lightgray;}
.step__item::before {  display: block;  position: absolute;  bottom: -5px;  left: calc(50% - 5px);  width: 10px;  height: 10px;  border-radius: 50%;  background: gray;  content: '';}

<ul class="step">    <li class="step__item selected">        CATEGORIA    </li>        <li class="step__item selected">        ATTRIBUTES    </li></ul>

Progress Bar with HTML and CSS

#progressbar {  background-color: black;  border-radius: 13px;  /* (height of inner div) / 2 + padding */  padding: 3px;}
#progressbar>div {  background-color: orange;  width: 40%;  /* Adjust with JavaScript */  height: 20px;  border-radius: 10px;}

<div id="progressbar">  <div></div></div>

---

Related Topics