Building a progress bar with labels

user_7808417 0
Viewed 1250

enter image description here

I'm in the process of building a progress bar with labels but i'm facing two problems.

  1. I need the label 6 to be lined up at the end of the progress bar as in the picture above.

respective code:

    .lables{
        display:flex;
        justify-content: space-around;
        color:white;
        background-color:white;
    }

I think that

justify-content: flex-end;

and

margin-left:calc(l00%/6 - width of each label);

might work but I don't know how to implement this or if there is a better solution.

  1. trying to make the progress bar rounded at both ends results in the entire bar becoming a circle. How do I achieve rounded border as in the picture above?

Entire html file:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>skill bar</title>
    </head>

<!-- style -->
    <style>
        .container{
            max-width:790px;
            margin: 0 auto;
        }
        .progress{
            width: 100%;
            background-color: dimgray;
        }
        .progress-bar{
            width:0;
            height: 10px;
            background-color:limegreen;
        }
        .lables{
            display:flex;
            justify-content: space-around;
            color:white;
            background-color:white;
        }
        .lables > div{
            background-color:dimgray;
            text-align: center;
            padding:10px;
            margin:12px;
            border-radius: 6px;
        }
    </style>

<!-- HTML -->
    <body>
        <div class="container">

            <div class="progress">
                <div class="lables">
                    <div> 1</div>
                    <div> 2</div>
                    <div> 3</div>
                    <div> 4</div>
                    <div> 5</div>
                    <div> 6</div>
                </div>
                <div class="progress-bar"></div>
            </div>
            <br>
            <button onclick="move()">Click Me</button>
        </div>

<!-- Javascript -->
        <script>
            function move(){
                const element = document.querySelector('.progress-bar');
                let width = 0;
                let id = setInterval(frame, 20);

                function frame(){
                    if(width>= 100){
                        clearInterval(id);
                    }else{
                        width++;
                        element.style.width = width + "%";
                    }
                }
            }
        </script>

    </body>
css html
1 Answers

For your first point, instead of using justify-content: space-around, you're likely looking for justify-content: space-between. If you want it to go even further (right to the edge), instead of margin: 12px, use margin: 12px 0. I've used this in my example.

For your second point, it's easy enough to add a border to the .progress-bar, but .progress itself is a little more difficult. I would recommend a slight restructure so that you have both the initial state of the progress bar and the indicator both contained within a container. The container would have position: relative, and both child elements would have position: absolute. From here you can just set a border-radius.

This can be seen in the following:

function move() {
  const element = document.querySelector('.progress-bar');
  let width = 0;
  let id = setInterval(frame, 20);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      element.style.width = width + "%";
    }
  }
}
.container {
  max-width: 790px;
  margin: 0 auto;
}

.progress-container {
  position: relative;
}

.progress, .progress-bar {
  height: 10px;
  border-radius: 10px;
  position: absolute;
}


.progress {
  width: 100%;
  background-color: dimgray;
}

.progress-bar {
  width: 0;
  background-color: limegreen;
}

.lables {
  display: flex;
  justify-content: space-between;
  color: white;
  background-color: white;
}

.lables>div {
  background-color: dimgray;
  text-align: center;
  padding: 10px;
  /*margin: 12px;*/
  margin: 12px 0;
  border-radius: 6px;
}
<body>
  <div class="container">
    <div>
      <div class="lables">
        <div> 1</div>
        <div> 2</div>
        <div> 3</div>
        <div> 4</div>
        <div> 5</div>
        <div> 6</div>
      </div>
      <div class="progress-container">
        <div class="progress"></div>
        <div class="progress-bar"></div>
      </div>
    </div>
    <br>
    <button onclick="move()">Click Me</button>
  </div>
</body>

user_23416030
Related