src/app/shared/progress-spinner/components/progress-spinner.component.scss

/********************************************************************************
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 ********************************************************************************/

@import "openk.styles";

$progress-spinner-height: 1em;
$progress-spinner-width: #{5 * 0.375em};
$progress-spinner-scaling: 1.5;

$progress-spinner-left-color: get-color($openk-success-palette);
$progress-spinner-right-color: get-color($openk-info-palette);

@mixin progress-spinner-element($nth) {
  background-color: mix($progress-spinner-right-color, $progress-spinner-left-color, $nth * 25%);
  animation-delay: (1 + $nth) * 0.1s;
}

:host {
  padding: #{0.5 * ($progress-spinner-scaling - 1) * $progress-spinner-height} 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: #{$progress-spinner-height};
  width: $progress-spinner-width;
}

.progress-spinner-rect {
  height: 100%;
  width: 20%;
  display: inline-block;
  animation: progress-spinner-animation 1s infinite ease-in-out;

  &:nth-child(1) {
    @include progress-spinner-element(0);
  }

  &:nth-child(2) {
    @include progress-spinner-element(1);
  }

  &:nth-child(3) {
    @include progress-spinner-element(2);
  }

  &:nth-child(4) {
    @include progress-spinner-element(3);
  }

  &:nth-child(5) {
    @include progress-spinner-element(4);
  }
}

@keyframes progress-spinner-animation {

  0%,
  40%,
  100% {
    transform: scaleY(1);
  }

  20% {
    transform: scaleY($progress-spinner-scaling);
  }
}