CODEWITHSUNDEEP
htmlcssprogress-bar
K1000
K1000

Reputation: 53

How to add vertical lines in a group of progress bars?

I'm looking to make progress bars with some vertical lines (red lines on my drawing) representating some steps in the progression. I'm able to display progress bars but I have absolutely no idea how to put vertical lines.. Can somebody have an idea ? Thank you.

Here is the drawing of want I want to do

Upvotes: 0

Views: 1894

Answers (2)

Abdelrahman Hatem
Abdelrahman Hatem

Reputation: 1036

You can try this code HTML

<div class="chart">
    <div class="horizontal-layer">
        <div class="horizontal">
            <h6 class="text">Skill #1</h6>
            <span class="bar" style="width:50%"></span>
        </div>
        <div class="horizontal">
            <h6 class="text">Skill #2</h6>
            <span class="bar" style="width:60%"></span>
        </div>
        <div class="horizontal">
            <h6 class="text">Skill #3</h6>
            <span class="bar" style="width:90%"></span>
        </div>
        <div class="horizontal">
            <h6 class="text">Skill #4</h6>
            <span class="bar" style="width:80%"></span>
        </div>
        <div class="horizontal">
            <h6 class="text">Skill #5</h6>
            <span class="bar" style="width:100%"></span>
        </div>
    </div>
    <div class="vertical-layer">
        <div class="vertical">
            <h6>Beginner</h6>
            <span class="line"></span>
        </div>
        <div class="vertical">
            <h6>Elementry</h6>
            <span class="line"></span>
        </div>
        <div class="vertical">
            <h6>Intermeiate</h6>
            <span class="line"></span>
        </div>
        <div class="vertical">
            <h6>Advanced</h6>
            <span class="line"></span>
        </div>
        <div class="vertical">
            <h6>Expert</h6>
            <span class="line"></span>
        </div>
    </div>
</div>

and CSS Codes

.chart{
    max-width: 500px;
    padding: 10px;
    padding-top: 55px;
    position: relative;
}
.horizontal{
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.horizontal .text{
    flex: 0 0 75px;
}
.bar{
    display: block;
    height: 9px;
    background: #dfdfdf;
    border: 1px solid #777;
}
.vertical-layer{
    position: absolute;
    top: 0;
    left: 85px;
    display: flex;
    justify-content: space-between;
    width: 80%;
    height: 100%;
}
.vertical{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.vertical .line{
    width: 2px;
    height: 100%;
    background: blue;
    display: block;
    border: none;
}

You get this approach hen you make one axis as relative to the relative parent and the second is absolute to the relative parent which is here is the vertical one, Enjoy.

Upvotes: 1

Steve Frost
Steve Frost

Reputation: 26

This is one of those situations where there's a thousand ways to create the desired outcome. At the most basic, you can absolute position elements within a relative positioned parent element to achieve this.

An example: https://codepen.io/stevefrost/pen/zYwPwxO

Upvotes: 0

Related Questions