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: 1️⃣ Submit in the first stage, 2️⃣ Under review in the second stage, 3️⃣ In delivery in the third stage, and Completed ✅ in the fourth stage).

The colors are correctly assigned.

Thank you for your response!

 

let steps := ["1️⃣ Submit", "2️⃣ Under review", "3️⃣ 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

null
Login to reply

Content aside

  • 1 yr agoLast active
  • 63Views
  • 1 Following