RSNewWebUI/webui-src/app/scss/components/_progress-bar.scss

@use 'sass:color';
@use '../abstracts/colors' as *;

.progress-bar {
  width: 100%;
  height: 2rem;
  position: relative;
  text-align: center;
  background-color: $light-color;
  border-radius: 20px;
  overflow: hidden;

  &__status {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    color: $dark-color;
    background-color: $primary-color;
  }

  &__percent {
    position: absolute;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
  }

  &-chunks {
    position: relative;
    margin-top: 0.5rem;
    width: 100%;
    height: 2rem;
    display: flex;
    border-radius: 0.25rem;
    overflow: hidden;
    background-color: $light-color;

    & .chunk {
      width: 100%;

      &[data-chunkVal='0'] {
        background-color: color.adjust($primary-light-color, $alpha: -0.8);
      }

      &[data-chunkVal='1'] {
        background-color: $red-color;
      }

      &[data-chunkVal='2'] {
        background-color: $primary-color;
      }

      &[data-chunkVal='3'] {
        background-color: $golden-yellow-color;
      }
    }

    &__percent {
      position: absolute;
      inset: 0;
      margin: auto;
      width: fit-content;
      height: fit-content;
    }
  }
}