[Summary view] [Print] [Text view]

   1  $theme-colours: ();
   2  $theme-colours: map-merge((
   3    "yellow" : #f9a541,
   4    "red"    : #f44321,
   5    "blue"   : #5091cd,
   6    "green"  : #7ac143,
   7  ), $theme-colours);
   8  
   9  :host {
  10    position: fixed;
  11    top: 0;
  12    left: 0;
  13    z-index: 10000;
  14    display: flex;
  15    align-items: center;
  16    width: 100%;
  17    height: 100%;
  18    overflow: hidden;
  19    opacity: .8;
  20  }
  21  
  22  .box {
  23    position: relative;
  24    width: 345px;
  25    height: 345px;
  26    margin: 0 auto;
  27  
  28    p {
  29      float: right;
  30      margin: 95px 0 0;
  31      font: normal 1.25em/1em sans-serif;
  32      color: #999;
  33    }
  34  
  35    > span {
  36      animation: jspinner 2s infinite ease-in-out;
  37    }
  38  
  39    .red {
  40      animation-delay: -1.5s;
  41    }
  42    .blue {
  43      animation-delay: -1s;
  44    }
  45    .green {
  46      animation-delay: -.5s;
  47    }
  48  }
  49  
  50  @each $colour in $theme-colours {
  51    $key: nth($colour, 1);
  52    $value: nth($colour, 2);
  53  
  54    .#{$key} {
  55      position: absolute;
  56      top: 0;
  57      left: 0;
  58      width: 90px;
  59      height: 90px;
  60      content: "";
  61      background: $value;
  62      border-radius: 90px;
  63  
  64      &::before,
  65      &::after {
  66        position: absolute;
  67        top: 0;
  68        left: 0;
  69        box-sizing: content-box;
  70        width: 50px;
  71        content: "";
  72        background: transparent;
  73        border: 50px solid $value;
  74      }
  75  
  76      &::before {
  77        height: 35px;
  78        margin: 60px 0 0 -30px;
  79        border-width: 50px 50px 0;
  80        border-radius: 75px 75px 0 0;
  81      }
  82  
  83      &::after {
  84        height: 105px;
  85        margin: 140px 0 0 -30px;
  86        border-width: 0 0 0 50px;
  87      }
  88    }
  89  }
  90  
  91  .yellow {
  92    margin: 0 0 0 255px;
  93    transform: rotate(45deg);
  94  }
  95  
  96  .red {
  97    margin: 255px 0 0 255px;
  98    transform: rotate(135deg);
  99  }
 100  
 101  .blue {
 102    margin: 255px 0 0;
 103    transform: rotate(225deg);
 104  }
 105  
 106  .green {
 107    transform: rotate(315deg);
 108  }
 109  
 110  @keyframes jspinner {
 111    0%, 40%, 100% {
 112      opacity: .3;
 113    }
 114    20% {
 115      opacity: 1;
 116    }
 117  }
 118  
 119  
 120  @media (prefers-reduced-motion: reduce) {
 121    .box > span {
 122      animation: none;
 123    }
 124  }