web-console/src/components/loader/loader.scss

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.loader {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);

  .loader-logo {
    position: absolute;
    width: 100%;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);

    @mixin drive-by($approach, $takeoff) {
      @keyframes drive-by-#{$approach}-#{$takeoff} {
        0% {
          transform: translate(#{(-100 - $approach * 30 + '%')}, 0);
          opacity: 0;
        }

        40% {
          transform: translate(0, 0);
          opacity: 1;
        }

        60% {
          transform: translate(0, 0);
          opacity: 1;
        }

        100% {
          transform: translate(#{(100 + $takeoff * 30 + '%')}, 0);
          opacity: 0;
        }
      }

      animation: drive-by-#{$approach}-#{$takeoff} 2s infinite;
    }

    svg {
      width: 100%;
      height: 80px;
      fill: #2ceefb;

      path {
        &.one {
          @include drive-by(2, 4);
        }

        &.two {
          @include drive-by(3, 3);
        }

        &.three {
          @include drive-by(6, 2);
        }

        &.four {
          @include drive-by(7, 2);
        }
      }
    }

    .label {
      text-align: center;

      &.cancel-label {
        cursor: pointer;
        color: #48aff0;
        opacity: 1;
        animation: 1s ease-in-out fadeInOpacity;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}