:root {
  --dot-size       : 15;
  --speed          : 1.3;
  --radius         : 6;
  --center-size    : 5;
  --rotation       : -25;
  --ring-radius    : 28;
  --ring-thickness : 0.75;
  --bg             : #9AD4F5;
}

.loader {
  position          : relative;
  height            : calc(var(--dot-size) * var(--center-size) * 1px);
  width             : calc(var(--dot-size) * var(--center-size) * 1px);
  -webkit-animation : turn calc(var(--speed) * 20s) calc(var(--speed) * -2s) infinite linear;
  animation         : turn calc(var(--speed) * 20s) calc(var(--speed) * -2s) infinite linear;
}

.loader:before {
  content       : '';
  position      : absolute;
  top           : 50%;
  left          : 50%;
  opacity       : 0.65;
  background    : var(--bg);
  height        : 100%;
  width         : 100%;
  transform     : translate(-50%, -50%);
  border-radius : 100%;
  animation     : pulse2 calc(var(--speed) * 1.2s) infinite alternate-reverse;
}

.dot {
  height    : calc(var(--dot-size) * 1.5px);
  width     : calc(var(--dot-size) * 1.5px);
  position  : absolute;
  top       : 50%;
  left      : 50%;
  transform : translate(-50%, -50%) rotate(calc((360 / 8) * var(--index) * 1deg)) translate(0, calc(var(--dot-size) * var(--radius) * 1px));
}

.dot:after,
.dot:before {
  content                           : '';
  border-radius                     : 100%;
  box-sizing                        : border-box;
  position                          : absolute;
  background                        : none;
  top                               : 50%;
  left                              : 50%;
  -webkit-animation-duration        : calc(var(--speed) * 1s);
  animation-duration                : calc(var(--speed) * 1s);
  -webkit-animation-delay           : calc((8 - var(--index)) * (var(--speed) / 8) * -1s);
  animation-delay                   : calc((8 - var(--index)) * (var(--speed) / 8) * -1s);
  -webkit-animation-iteration-count : infinite;
  animation-iteration-count         : infinite;
  -webkit-animation-timing-function : ease-in-out;
  animation-timing-function         : ease-in-out;
  -webkit-animation-fill-mode       : both;
  animation-fill-mode               : both;
  transform                         : translate(-50%, -50%) scale(var(--scale));
  filter                            : blur(5px);
}

.dot:after {
  --dot-size             : 5;
  --ring-thickness       : 0.75;
  --ring-radius          : 8;
  --scale                : 0;
  -webkit-animation-name : load;
  animation-name         : load;
  border                 : calc(var(--dot-size) * var(--ring-thickness) * 1px) solid var(--bg);
  height                 : calc(var(--dot-size) * var(--ring-radius) * 1px);
  width                  : calc(var(--dot-size) * var(--ring-radius) * 1px);
}

.dot:before {
  --scale                : 1.3;
  -webkit-animation-name : fade;
  animation-name         : fade;
  background             : var(--bg);
  height                 : 100%;
  width                  : 100%;
}

@-webkit-keyframes fade {
  0% {
    opacity : 1;
  }
  85%, 100% {
    opacity : 0.2;

  }
}

@keyframes fade {
  0% {
    opacity : 1;
    filter  : blur(0);

  }
  50%, 85% {
    filter : blur(3px);

  }
  85%, 100% {
    opacity : 0.2;
  }
}

@-webkit-keyframes load {
  0% {
    transform : translate(-50%, -50%) scale(0);
  }
  85%, 100% {
    transform : translate(-50%, -50%) scale(1);
    opacity   : .1;
  }
}

@keyframes load {
  0% {
    transform : translate(-50%, -50%) scale(0);
  }
  85%, 100% {
    transform : translate(-50%, -50%) scale(1);
    opacity   : .1;
  }
}

@-webkit-keyframes pulse2 {
  to {
    background : #6FC2E1;
    height     : calc(var(--dot-size) * var(--center-size) * 1.3px);
    width      : calc(var(--dot-size) * var(--center-size) * 1.3px);
  }
}

@keyframes pulse2 {
  to {
    background : #6FC2E1;
    height     : calc(var(--dot-size) * var(--center-size) * 1.3px);
    width      : calc(var(--dot-size) * var(--center-size) * 1.3px);
  }
}

@-webkit-keyframes turn {
  to {
    transform : rotate(-360deg);
  }
}

@keyframes turn {
  to {
    transform : rotate(-360deg);
  }
}