[Summary view] [Print] [Text view]

   1  :host {
   2    position: fixed;
   3    top: 0;
   4    left: 0;
   5    z-index: 10000;
   6    display: flex;
   7    align-items: center;
   8    width: 100%;
   9    height: 100%;
  10    overflow: hidden;
  11    opacity: 0.8;
  12  }
  13  
  14  .box {
  15    position: relative;
  16    width: 345px;
  17    height: 345px;
  18    margin: 0 auto;
  19  }
  20  .box p {
  21    float: right;
  22    margin: 95px 0 0;
  23    font: normal 1.25em/1em sans-serif;
  24    color: #999;
  25  }
  26  .box > span {
  27    -webkit-animation: jspinner 2s infinite ease-in-out;
  28            animation: jspinner 2s infinite ease-in-out;
  29  }
  30  .box .red {
  31    -webkit-animation-delay: -1.5s;
  32            animation-delay: -1.5s;
  33  }
  34  .box .blue {
  35    -webkit-animation-delay: -1s;
  36            animation-delay: -1s;
  37  }
  38  .box .green {
  39    -webkit-animation-delay: -0.5s;
  40            animation-delay: -0.5s;
  41  }
  42  
  43  .yellow {
  44    position: absolute;
  45    top: 0;
  46    left: 0;
  47    width: 90px;
  48    height: 90px;
  49    content: "";
  50    background: #f9a541;
  51    border-radius: 90px;
  52  }
  53  .yellow::before, .yellow::after {
  54    position: absolute;
  55    top: 0;
  56    left: 0;
  57    box-sizing: content-box;
  58    width: 50px;
  59    content: "";
  60    background: transparent;
  61    border: 50px solid #f9a541;
  62  }
  63  .yellow::before {
  64    height: 35px;
  65    margin: 60px 0 0 -30px;
  66    border-width: 50px 50px 0;
  67    border-radius: 75px 75px 0 0;
  68  }
  69  .yellow::after {
  70    height: 105px;
  71    margin: 140px 0 0 -30px;
  72    border-width: 0 0 0 50px;
  73  }
  74  
  75  .red {
  76    position: absolute;
  77    top: 0;
  78    left: 0;
  79    width: 90px;
  80    height: 90px;
  81    content: "";
  82    background: #f44321;
  83    border-radius: 90px;
  84  }
  85  .red::before, .red::after {
  86    position: absolute;
  87    top: 0;
  88    left: 0;
  89    box-sizing: content-box;
  90    width: 50px;
  91    content: "";
  92    background: transparent;
  93    border: 50px solid #f44321;
  94  }
  95  .red::before {
  96    height: 35px;
  97    margin: 60px 0 0 -30px;
  98    border-width: 50px 50px 0;
  99    border-radius: 75px 75px 0 0;
 100  }
 101  .red::after {
 102    height: 105px;
 103    margin: 140px 0 0 -30px;
 104    border-width: 0 0 0 50px;
 105  }
 106  
 107  .blue {
 108    position: absolute;
 109    top: 0;
 110    left: 0;
 111    width: 90px;
 112    height: 90px;
 113    content: "";
 114    background: #5091cd;
 115    border-radius: 90px;
 116  }
 117  .blue::before, .blue::after {
 118    position: absolute;
 119    top: 0;
 120    left: 0;
 121    box-sizing: content-box;
 122    width: 50px;
 123    content: "";
 124    background: transparent;
 125    border: 50px solid #5091cd;
 126  }
 127  .blue::before {
 128    height: 35px;
 129    margin: 60px 0 0 -30px;
 130    border-width: 50px 50px 0;
 131    border-radius: 75px 75px 0 0;
 132  }
 133  .blue::after {
 134    height: 105px;
 135    margin: 140px 0 0 -30px;
 136    border-width: 0 0 0 50px;
 137  }
 138  
 139  .green {
 140    position: absolute;
 141    top: 0;
 142    left: 0;
 143    width: 90px;
 144    height: 90px;
 145    content: "";
 146    background: #7ac143;
 147    border-radius: 90px;
 148  }
 149  .green::before, .green::after {
 150    position: absolute;
 151    top: 0;
 152    left: 0;
 153    box-sizing: content-box;
 154    width: 50px;
 155    content: "";
 156    background: transparent;
 157    border: 50px solid #7ac143;
 158  }
 159  .green::before {
 160    height: 35px;
 161    margin: 60px 0 0 -30px;
 162    border-width: 50px 50px 0;
 163    border-radius: 75px 75px 0 0;
 164  }
 165  .green::after {
 166    height: 105px;
 167    margin: 140px 0 0 -30px;
 168    border-width: 0 0 0 50px;
 169  }
 170  
 171  .yellow {
 172    margin: 0 0 0 255px;
 173    -webkit-transform: rotate(45deg);
 174            transform: rotate(45deg);
 175  }
 176  
 177  .red {
 178    margin: 255px 0 0 255px;
 179    -webkit-transform: rotate(135deg);
 180            transform: rotate(135deg);
 181  }
 182  
 183  .blue {
 184    margin: 255px 0 0;
 185    -webkit-transform: rotate(225deg);
 186            transform: rotate(225deg);
 187  }
 188  
 189  .green {
 190    -webkit-transform: rotate(315deg);
 191            transform: rotate(315deg);
 192  }
 193  
 194  @-webkit-keyframes jspinner {
 195    0%, 40%, 100% {
 196      opacity: 0.3;
 197    }
 198    20% {
 199      opacity: 1;
 200    }
 201  }
 202  
 203  @keyframes jspinner {
 204    0%, 40%, 100% {
 205      opacity: 0.3;
 206    }
 207    20% {
 208      opacity: 1;
 209    }
 210  }
 211  @media (prefers-reduced-motion: reduce) {
 212    .box > span {
 213      -webkit-animation: none;
 214              animation: none;
 215    }
 216  }