Search code examples
csslayoutflexboxcss-selectorsprogress-bar

Streching Layout & Even Distribution of Project Steps: Visualisation of a Custom Progress Bar (CSS/HTML)

I have been working on a custom progress bar that shows three kinds of steps: done, busy and todo steps. The basic html ul li is based on flexbox, where items can be added or taken out, without breaking the integrity of the layout.

enter image description here

I would like the steps to extend left and right, but cannot achieve this without breaking the width of the items. All steps should be equal in width. The current design works (and must remain working) with one, two, three, four or five steps.

I want the entire progress bar to stretch porportionally and fill the yellow area completely.

The final intended result should look something like this:

enter image description here

Here, the first and last bullet-tets should touch the ends of the yellow background, an all bullets should be centered above the text words.

There can be two variations: 1) The bullets having equali distance to one another. 2) The bullets spacing denepnding on the length of the text words. Both are fine, whichever containst the least amount of code.

In summary, the answered soludion should:

  • Get rid of the unused yellow space left and right surrounding the progress bar
  • While evenly distributing all bullets and their texts
  • All bullets should remain centered above the texts
  • Remain working when two, three, four and five li items populate the unordered list.

Demo

https://jsfiddle.net/9s48naw0/

body{
  background: lightblue;
  width: auto;
  padding: 50px;
}
a{text-decoration: none}

.progress {
    display: flex;
    background: yellow;
    width: auto;
}

.progress>li {
    flex: 1;
}

.progress>li, .progress>li a{
    list-style: none;
    text-align: center;
    width: auto;
    padding: 0;
    margin: 0;
    position: relative;
    text-overflow: ellipsis;
    color: lightgrey;
    display: block;
}

.progress>li .circle {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    background: lightgrey;
    display: block;
    margin: 0 auto .5em;
}

.progress>li .circle:after,
.progress>li .circle:before {
    display: block;
    position: absolute;
    top: 10px;
    width: 100%;
    height: 4px;
    content: '';
    background: lightgrey;
}


.progress>li :before {left: 0}
.progress>li :after {right: 0}

.progress>li:first-child .circle:after,
.progress>li:first-child .circle:before {
    width: 50%;
    margin-left: 50%
}

.progress>li:last-child .circle:after,
.progress>li:last-child .circle:before {
    width: 50%;
    margin-right: 50%
}

.progress>li.done .circle,
.progress>li.done .circle:after,
.progress>li.done .circle:before {background: green}
.progress>li.done,
.progress>li.done a{color: green}

.progress>li.busy .circle,
.progress>li.busy .circle:after,
.progress>li.busy .circle:before {background: violet}
.progress>li.busy,
.progress>li.busy a{color: violet}
<ul class="progress">


  <li class="done">
    <a href="#" title="More about the First Step">
      <span class="circle"></span>
    Step1</a>
  </li>


  <li class="done">
    <a href="#" title="Afterwards the Second Step">
      <span class="circle"></span>
    Step2</a>
  </li>


  <li class="busy">
    <a href="#" title="This about the current active Step">
      <span class="circle"></span>
    Step3</a>
  </li>


  <li>
    <a href="#" title="Future Next Step">
      <span class="circle"></span>
    Step4</a>
  </li>


  <li>
    <a href="#" title="And the Final Step">
      <span class="circle"></span>
    Step5</a>
  </li>


</ul>

Solution

  • @Sam, Please check the result and let me know your opinion. I hope it would be helpful for you ~

    body {
            background: lightblue;
            width: auto;
            padding: 50px;
        }

        a {
            text-decoration: none
        }

        .progress {
            display: flex;
            background: yellow;
            width: auto;
            padding: 0;
        }

        .progress>li {
            flex: 2;
        }

        .progress>li:first-child,
        .progress>li:last-child {
            flex: 1;
        }

        .progress>li:first-child a {
            text-align: left;
        }

        .progress>li:last-child a {
            text-align: right;
        }

        .progress>li,
        .progress>li a {
            list-style: none;
            text-align: center;
            padding: 0;
            margin: 0;
            position: relative;
            text-overflow: ellipsis;
            color: lightgrey;
            display: block;
        }

        .progress>li .circle {
            border-radius: 50%;
            width: 24px;
            height: 24px;
            background: lightgrey;
            display: block;
            margin: 0 auto .5em;
        }

        .progress>li:first-child .circle {
            margin-left: 7px;
        }

        .progress>li:last-child .circle {
            margin-right: 7px;
        }

        .progress>li .circle:after,
        .progress>li .circle:before {
            display: block;
            position: absolute;
            top: 10px;
            width: 100%;
            height: 4px;
            content: '';
            background: lightgrey;
        }

        .progress>li :before {
            left: 0
        }

        .progress>li :after {
            right: 0
        }

        .progress>li:first-child .circle:after,
        .progress>li:first-child .circle:before {
            width: 50%;
        }

        .progress>li:last-child .circle:after,
        .progress>li:last-child .circle:before {
            width: 50%;
        }

        .progress>li:first-child .circle::before {
            width: calc(50% - 10px);
            left: 10px;
        }
        .progress>li:last-child .circle::after {
            width: calc(50% - 10px);
            right: 10px;
        }

        .progress>li.done .circle,
        .progress>li.done .circle:after,
        .progress>li.done .circle:before {
            background: green
        }

        .progress>li.done,
        .progress>li.done a {
            color: green
        }

        .progress>li.busy .circle,
        .progress>li.busy .circle:after,
        .progress>li.busy .circle:before {
            background: violet
        }

        .progress>li.busy,
        .progress>li.busy a {
            color: violet
        }
    <ul class="progress">


  <li class="done">
    <a href="#" title="More about the First Step">
      <span class="circle"></span>
    Step1</a>
  </li>


  <li class="done">
    <a href="#" title="Afterwards the Second Step">
      <span class="circle"></span>
    Step2</a>
  </li>


  <li class="busy">
    <a href="#" title="This about the current active Step">
      <span class="circle"></span>
    Step3</a>
  </li>


  <li>
    <a href="#" title="Future Next Step">
      <span class="circle"></span>
    Step4</a>
  </li>


  <li>
    <a href="#" title="And the Final Step">
      <span class="circle"></span>
    Step5</a>
  </li>


</ul>