I have styled the carousel indicators to have a progress animation. The transition starts when the list item becomes active, and after 5 seconds it ends, the color disappears, and the next indicator is active and we see the animation start.

However, when the page first loads, it's not animating, it is already the final color.

To visualize, I animated a left border of a div to fill with color from top to bottom.

Sample Code:

        .carousel .carousel-indicators li::before {
            content: "";
            position: absolute;
            top: 0;
            left:0;
            width: 4px;
            background: Color-goes-here;
            height: 0;
            z-index: 1;
        }
        .carousel .carousel-indicators li.active::before {
            height:100%;
            transition: height 5s ease;
        }

It doesn't work because you're using transition, but there is no transition happening when the page loads.

So, use animation instead, which runs when the page loads:

@keyframes myAnimation {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

.carousel .carousel-indicators li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  background: Color-goes-here;
  height: 0;
  z-index: 1;
}
.carousel .carousel-indicators li.active::before {
  height: 100%;
  animation: myAnimation 5s ease;
}

demo