storj.io/minio@v0.0.0-20230509071714-0cbc90f649b1/browser/app/css/loader.css (about)

     1  .page-load {
     2      position: fixed;
     3      width: 100%;
     4      height: 100%;
     5      top: 0;
     6      left: 0;
     7      background: #002a37;
     8      z-index: 100;
     9      transition: opacity 200ms;
    10      -webkit-transition: opacity 200ms;
    11  }
    12  
    13  .pl-0{
    14      opacity: 0;
    15  }
    16  
    17  .pl-1 {
    18      display: none;
    19  }
    20  
    21  .pl-inner {
    22      position: absolute;
    23      width: 100px;
    24      height: 100px;
    25      left: 50%;
    26      margin-left: -50px;
    27      top: 50%;
    28      margin-top: -50px;
    29      text-align: center;
    30      -webkit-animation: fade-in 500ms;
    31      animation: fade-in 500ms;
    32      -webkit-animation-fill-mode: both;
    33      animation-fill-mode: both;
    34      animation-delay: 350ms;
    35      -webkit-animation-delay: 350ms;
    36      -webkit-backface-visibility: visible;
    37      backface-visibility: visible;
    38  }
    39  
    40  .pl-inner:before {
    41      content: '';
    42      position: absolute;
    43      width: 100%;
    44      height: 100%;
    45      left: 0;
    46      top: 0;
    47      display: block;
    48      -webkit-animation: spin 1000ms infinite linear;
    49      animation: spin 1000ms infinite linear;
    50      border: 1px solid rgba(255, 255, 255, 0.2);;
    51      border-left-color: #fff;
    52      border-radius: 50%;
    53  }
    54  
    55  .pl-inner > img {
    56      width: 30px;
    57      margin-top: 21px;
    58  }
    59  
    60  @-webkit-keyframes fade-in {
    61      0% {
    62          opacity: 0;
    63      }
    64      100% {
    65          opacity: 1;
    66      }
    67  }
    68  
    69  @keyframes fade-in {
    70      0% {
    71          opacity: 0;
    72      }
    73      100% {
    74          opacity: 1;
    75      }
    76  }
    77  
    78  @-webkit-keyframes spin {
    79      0% {
    80          -webkit-transform: rotate(0deg);
    81          transform: rotate(0deg);
    82      }
    83      100% {
    84          -webkit-transform: rotate(360deg);
    85          transform: rotate(360deg);
    86      }
    87  }
    88  
    89  @keyframes spin {
    90      0% {
    91          -webkit-transform: rotate(0deg);
    92          transform: rotate(0deg);
    93      }
    94      100% {
    95          -webkit-transform: rotate(360deg);
    96          transform: rotate(360deg);
    97      }
    98  }