Day 2 Progress Steps

 

html

body>
    <div class="container">
        <div class="progress-container">
            <div class="progress" id="progress"></div>
            <div class="circle active">1</div>
            <div class="circle">2</div>
            <div class="circle">3</div>
            <div class="circle">4</div>
        </div>
        <button class="btn" id="prev" disabled>Prev</button>
        <button class="btn" id="next">Next</button>
    </div>
    <script src="script.js"></script>
</body>

 

 

css

:root {

--line-border-fill: #3498db;

--line-border-empty: #e0e0e0;

}

.progress::before {

content: '';

background-color: var(--line-border-empty);

position: absolute;

top: 50%;

left: 0;

transform: translateY(-50%);

height: 4px;

width: 0%;

z-index: -1;

}

 

JS

need to know how the logic works as far as the progress bar