Currently, I am working on an Angular app and implementing a progress bar using Angular. However, I have encountered two issues with my progress bar that need to be addressed.
The fourth section of web development is titled "from end," and I would like it to align straight just like the first section.
The text inside the boxes is appearing one after the other in separate lines. I aim to have them displayed in a single line simultaneously.
Can anyone provide guidance on how to resolve these issues?
.wrap {
width: 100%;
height: 30px;
z-index: -2;
white-space: nowrap;
overflow: hidden;
}
.wrap div:first-child {
margin-left: -2%;
}
.progress {
margin: 0;
margin-left: 0.5%;
height: 30px;
width: 25%;
position: relative;
display: inline-block;
text-align: center;
line-height: 30px;
transition: all 0.8s;
}
.progress:before,
.progress:after {
content: "";
position: absolute;
transition: all 0.8s;
z-index: -1;
}
.progress:before {
height: 50%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
transform: skew(45deg);
}
.progress:after {
height: 50%;
width: 100%;
top: 50%;
left: 0;
background: rgba(0, 0, 0, 0.2);
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
}
.progress:hover:before,
.progress:hover:after {
background: tomato;
}<div class="wrap">
<div class="progress">
<div>MyData</div>
<div>My Status</div>
</div>
<div class="progress">
<div>MyData</div>
<div>My Status</div>
</div>
<div class="progress">
<div>MyData</div>
<div>My Status</div>
</div>
<div class="progress">
<div>MyData</div>
<div>My Status</div>
</div>
</div>