.length-indicator__indicator {
  background: #ddd;
  width: 100%;
  height: 10px;
  opacity: 0.2;
}

.length-indicator__indicator--bad {
  background: red;
}
.length-indicator__indicator--ok {
  background: orange;
}
.length-indicator__indicator--good {
  background: green;
}

.length-indicator {
  display: flex;
  position: relative;
}

.length-indicator__indicator.is-active {
  opacity: 1;
}

.length-indicator__cursor {
  position: absolute;
  left: 0;
  top: 10px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid black;
  margin-left: -4px;
  margin-right: -4px;
}