I recently designed a circular multi-step progress UI using HTML and CSS, but I encountered an issue when adding text underneath the circular icon. The line crossing the bar moved down because the circle's height increased based on the content length. How can I ensure that the line stays centered even as content is added?
Here are screenshots illustrating the issue:
Before adding the content:
https://i.sstatic.net/2JMb2.png
After adding the content:
https://i.sstatic.net/n3Mwg.png
I'm struggling with this CSS challenge and would appreciate any help or suggestions you can offer.
Check out the working demo to see the code in action.
App.js
import CheckIcon from "@mui/icons-material/Check";
import "./styles.css";
export default function App() {
const steps = [1, 2, 3, 4, 5];
return (
<>
<div class="container">
<div class="progress-container">
<div class="progress" id="progress"></div>
{steps.map((val) => (
<div>
<div className={`circle ${val === 4 ? "active" : ""}`}>
{val === 4 ? <CheckIcon sx={{ fontSize: "3rem" }} /> : null}
</div>
<div className="test">
{val % 2 === 0
? "Conservative"
: "Somewhat Conservative but it is okay"}
</div>
</div>
))}
</div>
</div>
</>
);
}
style.css:
@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
.container {
text-align: center;
}
.progress-container {
display: flex;
justify-content: space-between;
position: relative;
max-width: 100%;
width: 700px;
}
.progress-container::before {
content: "";
background-color: #767676;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 100%;
z-index: -1;
}
.progress {
/* background-color: var(--line-border-fill); */
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 0%;
z-index: -1;
transition: 0.4s ease;
}
.circle {
background-color: #fff;
color: #999;
border-radius: 50%;
height: 85px;
width: 85px;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid #767676;
transition: 0.4s ease;
cursor: pointer;
font-size: 20px;
}
.circle.active {
border-color: #3769ff;
background-color: #3769ff;
color: #ffffff;
}
.test {
max-width: 85px;
}
Results
** The length of the <hr/> tag decreases when resizing the screen. **
A link to the demo is provided in the comments section below.