0
Steps Progress Bar Misalignment Across Stages
Hello everyone, I’ve set up a progress bar with steps, but it’s not correctly distributed across each stage as shown in the image
(the correct setup should be: Submit in the first stage, Under review in the second stage, In delivery in the third stage, and Completed in the fourth stage).
The colors are correctly assigned.
Thank you for your response!
let steps := [" Submit", " Under review", " In delivery", "Completed "];
let colors := ["#555358", "#E2C044", "#44AF69", "#4970FF"];
let currentStep := 4;
let progressBars := "";
for i in range(1, currentStep + 1) do
let width := 100 / length(steps);
let color := colors[i - 1];
let stepLabel := steps[i - 1];
let bar := "<div class='progress-bar step-" + i +
" progress-bar-striped progress-bar-animated'
style='width: " +
width +
"%; background-color: " +
color +
";'
aria-valuenow='" +
i * width +
"'
aria-valuemin='0'
aria-valuemax='100'>" +
stepLabel +
"</div>";
progressBars := progressBars + bar
end;
html("
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.progress {
display: flex;
height: 25px;
overflow: hidden;
font-size: 0.75rem;
background-color: #e9ecef;
border-radius: 0.25rem;
}
.progress-bar {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
transition: width 0.6s ease;
text-align: center;
padding: 0 10px;
}
.progress-bar-striped {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
}
.progress-bar-animated {
animation: progress-bar-stripes 1s linear infinite;
}
@keyframes progress-bar-stripes {
from { background-position: 1rem 0; }
to { background-position: 0 0; }
}
</style>
</head>
<body>
<div class='bootstrap5'>
<div class='progress'>" +
progressBars +
"</div>
</div>
</body>
")
Reply
Content aside
- 2 days agoLast active
- 22Views
-
1
Following