I have to create a progress bar that has to be fully responsive. In order to be responsive I don't want the progress bar class to have a fixed width, but when I put auto in width, line of progress bar is detached from the star also if I give to them auto width
Fixed width: look good
Width auto
First how can I fix this issue, and perhaps someone can help me achieve this progress bar to be responsive on mobile also so that the line of progress bar will be vertical.
.progress-bar {
width: 750px;
display: flex;
margin: 40px 0;
}
.progress-bar .step {
text-align: center;
width: 100%;
}
.progress-bar .step .bullet {
position: relative;
height: 25px;
width: 25px;
display: inline-block;
}
.progress-bar .step:last-child .bullet:before,
.progress-bar .step:last-child .bullet::after {
display: none;
}
.progress-bar .step .bullet:before,
.progress-bar .step .bullet::after {
position: absolute;
content: "";
height: 3px;
right: -136px;
bottom: 11px;
width: 142px;
background: #C1C1C1;
}
.active-bullet {
z-index: 1;
}
.active-check {
z-index: 2;
}<div >
<div >
<div >
<img src="star-pb-active.svg">
</div>
<div style="
border-bottom: 2px solid black;
padding: 2px;
DISPLAY: table-cell;
LEFT: 40px;
POSITION: relative;
">Order placed</div>
</div>
<div >
<div >
<img src="star-pb.svg">
</div>
<div >Jewerly Creation</div>
</div>
<div >
<div >
<img src="star-pb.svg">
</div>
<div >Packing & Quality Control</div>
</div>
<div >
<div >
<img src="star-pb.svg">
</div>
<div >Shipped</div>
</div>
<div >
<div >
<img src="star-pb.svg">
</div>
<div >Estimated Delivery</div>
</div>
</div>CodePudding user response：
You should try taking a look at the flex-grow property from Flexbox.
By giving display: flex to the parent, and flex-grow: 1 to the children, you should be able to make every step be the same size and take all the width of their container.
CodePudding user response：
try below code, your code some confusion.
- use flex in css
- below sample add one button which goes your activity to next step
- it is fully responsive .
- just use small js, css and for tick icon font awesome js. if any query comment it.
let step = 'step1';
const step1 = document.getElementById('step1');
const step2 = document.getElementById('step2');
const step3 = document.getElementById('step3');
const step4 = document.getElementById('step4');
function next() {
if (step === 'step1') {
step = 'step2';
step1.classList.remove("is-active");
step1.classList.add("is-complete");
step2.classList.add("is-active");
} else if (step === 'step2') {
step = 'step3';
step2.classList.remove("is-active");
step2.classList.add("is-complete");
step3.classList.add("is-active");
} else if (step === 'step3') {
step = 'step4d';
step3.classList.remove("is-active");
step3.classList.add("is-complete");
step4.classList.add("is-active");
} else if (step === 'step4d') {
step = 'complete';
step4.classList.remove("is-active");
step4.classList.add("is-complete");
} else if (step === 'complete') {
step = 'step1';
step4.classList.remove("is-complete");
step3.classList.remove("is-complete");
step2.classList.remove("is-complete");
step1.classList.remove("is-complete");
step1.classList.add("is-active");
}
}.progress-bar {
position: relative;
display: inline-block;
}
.progress-bar .progress-track {
position: absolute;
top: -10px;
width: 100%;
height: 5px;
background-color: #dfe3e4;
z-index: -1;
transform: rotate(90deg);
}
.progress-bar .progress-step {
position: relative;
width: 100%;
font-size: 12px;
text-align: center;
}
.progress-bar .progress-step:last-child:after {
display: none;
}
.progress-bar .progress-step:before {
content: "\f00c";
display: flex;
margin: 0 auto;
margin-bottom: 10px;
width: 10px;
height: 10px;
background: #fff;
border: 4px solid #dfe3e4;
border-radius: 100%;
color: transparent;
}
.progress-bar .progress-step:after {
content: "";
position: absolute;
top: 20px;
left: 0%;
width: 0%;
transition: width 1s ease-in;
height: 5px;
background: #dfe3e4;
z-index: -1;
transform: rotate(90deg);
}
.progress-bar .progress-step.is-active {
color: #2183dd;
}
.progress-bar .progress-step.is-active:before {
border: 4px solid #777;
animation: pulse 2s infinite;
}
.progress-bar .progress-step.is-complete {
color: #009900;
}
.progress-bar .progress-step.is-complete:before {
font-family: FontAwesome;
font-size: 10px;
color: #fff;
background: #009900;
border: 4px solid transparent;
}
.progress-bar .progress-step.is-complete:after {
background: #2183dd;
animation: nextStep 1s;
animation-fill-mode: forwards;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(33, 131, 221, 0.8);
}
70% {
box-shadow: 0 0 0 10px rgba(33, 131, 221, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(33, 131, 221, 0);
}
}
@keyframes nextStep {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
.container {
margin: 50px 100px;
}
button {
position: absolute;
right: 50px;
bottom: 20px;
cursor: pointer;
}<script src="https://use.fontawesome.com/c47bc38e87.js"></script>
<div >
<div >
<div ></div>
<div id="step1" >
<div style="left: 44px; position: absolute; top: 0px;">placed</div>
</div>
<div id="step2" >
<div style="left: 44px; position: absolute; top: 0px;">Creation</div>
</div>
<div id="step3" >
<div style="left: 44px; position: absolute; top: 0px;">Packing</div>
</div>
<div id="step4" >
<div style="left: 44px; position: absolute; top: 0px;">Delivered</div>
</div>
</div>
<button onClick=next()>Next Step</button>
</div>CodePudding user response：
It works the way you want, in fixed or auto width.
.progress-bar {
width: auto;
display: flex;
margin: 40px 0;
}
.progress-bar .step {
text-align: center;
position: relative;
isolation: isolate;
width: 100%;
}
.progress-bar .step::after {
content: "";
position: absolute;
z-index: -1;
height: 3px;
top: 12px; /* 1/2 of .bullet's height */
width: 100%;
background: #C1C1C1;
}
.progress-bar .step:last-child::after {
display: none;
}
.progress-bar .step .bullet {
position: relative;
height: 25px;
width: 25px;
display: inline-block;
}
.active-bullet {
z-index: 1;
}
.active-check {
z-index: 2;
}
Added pseudo element on the parent of .bullet.
Also you don't need ::before, one of those pseudo elements was enough.