github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/app/styles/components/loading-spinner.scss (about)

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