$name: 'ivue-loading-bar';

.#{$name} {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 2000;

  &-inner {
    transition: width var(--ivue-default-transition-time) linear;

    &-color-primary {
      background-color: var(--ivue-primary-color);
    }

    &-color-error {
      background-color: var(--ivue-error-color);
    }
  }
}

.#{$name}-fade-enter-active,
.#{$name}-fade-leave-active {
  transition: opacity 0.5s;
}

.#{$name}-fade-enter-from,
.#{$name}-fade-leave-to {
  opacity: 0;
}