multi-stage progress bar gradient

by Soviut

HTML

<div class="progress">
</div>

SCSS

.progress {
  height: 10px;
  
  background: linear-gradient(
    to right, 
    green,
    green 15%,
    white 15%,
    white calc(15% + 2px),
    orange calc(15% + 2px),
    orange 85%,
    white 85%,
    white calc(85% + 2px),
    red calc(85% + 2px)
  );
}