.progress-bar {
    position: relative;
    width: 100%;
    height: 18px;
    background: linear-gradient(to right, #ffcd1a 0%, #d1ce20 50%, #b4df3c 100%);
    overflow: hidden;
    border-radius: 7px;
}
  
.progress-bar-fill {
    --value: 0;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: calc(100% - (var(--value) * 1%));
    background-color: #e0e0e0;
}

.colspan-with-lines {
    position: relative;
    background-repeat: no-repeat;
    background-image:
      linear-gradient(to bottom, #dee2e6 0%, #dee2e6 100%),
      linear-gradient(to bottom, #dee2e6 0%, #dee2e6 100%),
      linear-gradient(to bottom, #dee2e6 0%, #dee2e6 100%),
      linear-gradient(to bottom, #dee2e6 0%, #dee2e6 100%),
      linear-gradient(to bottom, #dee2e6 0%, #dee2e6 100%);
    background-size: 1px 100%;
    background-position:
      calc(1 * 100% / 6 - 0.025%) 0,
      calc(2 * 100% / 6 - 0.025%) 0,
      calc(3 * 100% / 6) 0,
      calc(4 * 100% / 6 + 0.025%) 0,
      calc(5 * 100% / 6 + 0.025%) 0;
    z-index: 1; 
}

.colspan-with-lines .progress-bar {
    position: relative;
    z-index: 2;
}