flood/client/source/sass/components/_progress-bar.scss

@keyframes candy-stripe {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 4px 0;
  }
}

$progress-bar--height: 3px;

$progress-bar--background: #e3e5e5;
$progress-bar--background--selected: rgba(#fff, 0.5);
$progress-bar--background--selected--stopped: rgba(#fff, 0.5);
$progress-bar--fill: $green;

$progress-bar--fill--checking: #8899a8;
$progress-bar--fill--completed: $blue;
$progress-bar--fill--error: #e95779;
$progress-bar--fill--selected: #fff;
$progress-bar--fill--stopped: #e3e5e5;

.progress-bar {
  display: flex;
  transition: opacity 0.25s;
  width: 100%;
  z-index: 1;

  .is-selected.is-stopped & {
    opacity: 0.5;
  }

  &__icon {
    flex: 0 0 auto;
    padding-right: 5px;

    .icon {
      display: block;
      fill: $green;
      height: 12px;
      transition: fill 0.25s, opacity 0.25s;
      width: 12px;

      .is-seeding & {
        fill: $progress-bar--fill--completed;
      }

      .is-completed &,
      .is-stopped & {
        fill: $progress-bar--fill--stopped;
      }

      .has-error & {
        fill: $progress-bar--fill--error;
      }

      .is-checking & {
        fill: $progress-bar--fill--checking;
      }

      .is-selected & {
        fill: $progress-bar--fill--selected;
      }
    }
  }

  &__fill {
    align-items: center;
    background: $progress-bar--fill;
    bottom: 0;
    height: $progress-bar--height;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background 0.25s, width 0.25s;
    z-index: 1;

    .is-seeding & {
      background: $progress-bar--fill--completed;
    }

    .is-completed &,
    .is-stopped & {
      background: $progress-bar--fill--stopped;
    }

    .has-error & {
      background: $progress-bar--fill--error;
    }

    .is-checking & {
      background: $progress-bar--fill--checking;
    }

    .is-selected & {
      background: $progress-bar--fill--selected;
    }

    &__wrapper {
      flex: 1 1 auto;
      position: relative;

      &:after {
        background: $progress-bar--fill;
        content: '';
        height: 1px;
        left: 0;
        opacity: 0.5;
        position: absolute;
        z-index: 0;
        top: 50%;
        transform: translateY(-50%);
        transition: background 0.25s, opacity 0.25s;
        width: 100%;

        .is-stopped & {
          background: $progress-bar--fill--stopped;
        }

        .has-error & {
          background: $progress-bar--fill--error;
        }

        .is-selected & {
          background: $progress-bar--background--selected;
        }

        .is-selected.is-stopped & {
          background: $progress-bar--background--selected--stopped;
          opacity: 1;
        }

        .is-checking & {
          animation: candy-stripe 0.25s linear infinite;
          background-color: transparent;
          background-image: linear-gradient(-45deg, rgba($progress-bar--fill--checking, 0) 0,
            rgba($progress-bar--fill--checking, 0) 25%, rgba($progress-bar--fill--checking, 0.5) 25%,
            rgba($progress-bar--fill--checking, 0.5) 50%, rgba($progress-bar--fill--checking, 0) 50%,
            rgba($progress-bar--fill--checking, 0) 75%, rgba($progress-bar--fill--checking, 0.5) 75%,
            rgba($progress-bar--fill--checking, 0.5) 100%);
          background-size: 4px 4px;
          height: $progress-bar--height;
        }

        .is-selected.is-checking & {
          background-image: linear-gradient(-45deg, rgba(#fff, 0) 0,
            rgba(#fff, 0) 25%, rgba(#fff, 0.5) 25%,
            rgba(#fff, 0.5) 50%, rgba(#fff, 0) 50%,
            rgba(#fff, 0) 75%, rgba(#fff, 0.5) 75%,
            rgba(#fff, 0.5) 100%);
        }
      }
    }
  }
}