github.com/hernad/nomad@v1.6.112/ui/app/styles/components/loading-spinner.scss (about)

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  $duration: 5s;
     7  
     8  $side-length: 50px;
     9  $cube-length: $side-length * 5;
    10  
    11  $lighter-side: $grey-blue;
    12  $darker-side: darken($lighter-side, 15%);
    13  
    14  .loading-spinner {
    15    width: 100%;
    16  
    17    .cube-and-logo {
    18      position: relative;
    19      margin: 100px auto;
    20      width: $cube-length;
    21      height: $cube-length;
    22    }
    23  
    24    .logo-container {
    25      position: absolute;
    26      width: $cube-length;
    27      height: $cube-length;
    28      top: 0;
    29      left: 0;
    30  
    31      display: flex;
    32      justify-content: center;
    33      align-items: center;
    34  
    35      .icon {
    36        width: 32%;
    37        height: 32%;
    38        transform: translateY(-20px);
    39        fill: white;
    40        animation: n-fade $duration forwards infinite;
    41      }
    42    }
    43  
    44    .cube {
    45      width: $cube-length;
    46      height: $cube-length;
    47      transform-style: preserve-3d;
    48      animation: cube-spin $duration forwards infinite;
    49    }
    50  
    51    @media (prefers-reduced-motion) {
    52      .cube {
    53        animation-iteration-count: 0;
    54      }
    55    }
    56  
    57    &.paused {
    58      .cube,
    59      .side-4,
    60      .logo-container .icon {
    61        animation-play-state: paused;
    62      }
    63    }
    64  
    65    .side {
    66      width: $side-length;
    67      height: $side-length;
    68      position: absolute;
    69      background: $lighter-side;
    70    }
    71  
    72    .side-1 {
    73      top: $side-length;
    74      left: $side-length * 2;
    75      transform-origin: 50% 100%;
    76      transform: rotateX(-90deg);
    77    }
    78  
    79    .side-2 {
    80      top: $side-length * 3;
    81      left: $side-length * 2;
    82      transform-origin: 50% 0%;
    83      transform: rotateX(90deg);
    84    }
    85  
    86    .side-3 {
    87      top: $side-length * 2;
    88      left: $side-length;
    89      transform-origin: 100% 50%;
    90      transform: rotateY(90deg);
    91    }
    92  
    93    .side-4 {
    94      top: $side-length * 2;
    95      left: $side-length * 2;
    96      transform-origin: 100% 50%;
    97      transform: rotateY(90deg);
    98      animation: darker-side-fade $duration forwards infinite;
    99    }
   100  }
   101  
   102  $rotateX: 55deg;
   103  $rotateY: 45deg;
   104  
   105  @keyframes cube-spin {
   106    0% {
   107      transform: rotateX($rotateX) rotate($rotateY) rotateZ(360deg);
   108    }
   109  
   110    30% {
   111      transform: rotateX($rotateX) rotate($rotateY) rotateZ(0deg);
   112    }
   113  
   114    70% {
   115      transform: rotateX($rotateX) rotate($rotateY) rotateZ(0deg);
   116    }
   117  
   118    100% {
   119      transform: rotateX($rotateX) rotate($rotateY) rotateZ(360deg);
   120    }
   121  }
   122  
   123  @keyframes darker-side-fade {
   124    30% {
   125      background: $lighter-side;
   126    }
   127  
   128    35% {
   129      background: $darker-side;
   130    }
   131  
   132    65% {
   133      background: $darker-side;
   134    }
   135  
   136    70% {
   137      background: $lighter-side;
   138    }
   139  }
   140  
   141  @keyframes n-fade {
   142    0% {
   143      opacity: 0;
   144    }
   145  
   146    40% {
   147      opacity: 0;
   148    }
   149  
   150    45% {
   151      opacity: 1;
   152    }
   153  
   154    65% {
   155      opacity: 1;
   156    }
   157  
   158    70% {
   159      opacity: 0;
   160    }
   161  
   162    100% {
   163      opacity: 0;
   164    }
   165  }