progress-indicator.component.scss

// --------------------------------------------------------------
// configuration TODO: we should implement this from the app!
// --------------------------------------------------------------

// color definitions
$bright: rgba(249, 249, 249, 1);
$dark: rgba(41, 41, 41, 1);

$mute: rgba(128, 128, 128, 0.8);

$accent: rgba(255, 196, 0, 1);
$primary: rgba(0, 105, 92, 1);
$warn: rgb(244, 67, 54);

// --------------------------------------------------------------

//
// default progress-indicator: rolling dasch logo
//

.app-progress-indicator.default {
  margin: 48px auto;

  .loader {
    display: block;
    margin: 0 auto;
  }
  svg path {
    stroke-dasharray: 530;
    stroke-dashoffset: 530;
    animation: load 3s both infinite;
  }

  @keyframes load {
    to {
      stroke-dashoffset: 2120;
    }
  }

}

//
// submit data has a different progress indicator
//
.app-progress-indicator.submit {
  height: 32px;
  width: 32px;

  .on-submit {
    animation: spinner-keyframes .7s linear infinite;
    height: 32px;
    width: 32px;

    .spinner {
      border: 2px solid $primary;
      border-bottom-color: transparent;
      border-radius: 50%;
      border-right-color: transparent;
      height: 28px;
      width: 28px;
    }
  }

  .before-submit {
    color: $mute;
  }

  .after-submit {
    color: $primary;
  }

  .submit-error {
    color: $warn;
  }

  @keyframes spinner-keyframes {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

}